JavaScript的节点操作 —— 增加节点

小鱼·

于 2023-01-23 11:32:12 发布

阅读量1.4k

点赞数 1

文章标签： javascript 前端 html 开发语言 vscode

本文链接：https://blog.csdn.net/Ass12454548/article/details/128751838

版权

JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。

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

利用案例来学习：

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

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

HTML布局代码：

<body>
 
    <input type="text" placeholder="请输入添加的水果名" id="fruits"> 
    <button id="btn">添加</button>
    <ul id="ul">
        <li>苹果</li>
        <li>香蕉</li>
        <li>鸭梨</li>
    </ul>
 
</body>

注意：因为后续我们 JavaScript要利用 id 获取元素，所以提前给好 id名称。

JavaScript代码实现：

第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。

input框中的文字要用，所以利用getElementByid获取 input 输入框。

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

button 按钮我们要单击，所以同样利用getElementByid的方法获取 button 按钮。

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

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

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

第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等）

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

      btn.addEventListener('click',function(){


       //执行的语法
})

第三步：在单击事件中，所要做的操作。

在单击事件里面我们做JavaScript的核心代码 —— 添加节点。

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

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

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

// 语法： var 变量名 = document.createTextNode("文本的内容")
var text = document.createTextNode(fruits.value);

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

// 语法：创建的元素节点 .appendChild (创建的文本节点)
li.appendChild(text);

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

//语法： 父级标签 .appendChild(创建的子级标签)
 ul.appendChild(li);

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

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

小鱼·

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的节点操作 —— 增加节点

JavaScript的节点操作 —— 增加节点
复制链接

扫一扫