一下JavaScript中的创建节点,添加节点是怎么做的?

  目录

  JavaScript中的节点操作分为:增、删、改、查(获取),四大类型。

  今天我们总结一下JavaScript中的创建节点,添加节点。

  后续我会更新上,利用JavaScript的节点操作制作一个简易的留言板!!!

  我们直接利用案例来学习:

  案例效果

  案例分析:在input框中输入文字,单击添加按钮,将输入的文字放到li标签中 添加到ul标签中。

  案例效果:利用input输入框、button按钮 和ul li列表制作 。其中只用 HTML 布局和 JS脚本。

  HTML布局代码:

  

         
        添加
        
            苹果
            香蕉
            鸭梨
        

  注意:因为后续我们 JavaScript要利用 id 获取元素js添加元素,所以提前给好 id名称。

  JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用id、class、name、标签获取)。

  input框中的文字要用js添加元素,所以获取 input 输入框。

  var fruits = document.getElementById("fruits");

  button 按钮 我们要单击,所以获取 button 按钮。

  var btn = document.getElementById("btn");

  我们要在 ul 列表中插入新的元素 li 所以要获取 ul 列表。

  var ul = document.getElementById("ul");

  第二步:事件操作(单击事件、双击事件、鼠标移入事件、移出事件等等)

  案例用我们要用到 鼠标单击 按钮的事件,所以给获取到的 按钮添加一个单击事件。

   btn.onclick = function(){

      
        //执行的语法

  第三步:在单击事件中,所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。

  1、创建一个 li 的元素节点。

   //语法:var 变量名 = document.createElement("创建的标签名")

  2、创建一个文本节点(文本节点的内容就是input输入框中的内容)。

   // 语法: var 变量名 = document.createTextNode("文本的内容")

  3、将创建的文本的内容 添加到 创建的标签中。

   // 语法:创建的元素节点 .appendChild (创建的文本节点)

  4、将创建的元素节点 添加到 HTML 相应的位置。注意:这里是将 创建的 li 元素节点添加到 HTML标签中的 ul 里面,ul 和 li 是一个父子关系,所以我们要用到 appendChild添加。

   //语法: 父级标签 .appendChild(创建的子级标签)

  这里的 ul 是因为在第一步,获取到了 ul 标签,所以直接用就行。

  最后出现的效果就是这样的效果:

  案例效果

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/2004
0 评论
797

发表评论

!