在文档中创建并插入新的节点

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

我们可以获取到文档里面的节点,修改节点的内容,我们还可以创建新的节点,然后把它插入到文档里面 … 创建新的节点,可以使用 createElement() 这个方法来创建元素类型的节点 …

createTextNode() 可以创建文本类型的节点 …

然后用 appendChild() ,或者 insertBefore() 把节点插入到指定的地方 …

测试

下面我们可以去试一下 … 在这个列表里面添加一个新的列表元素 …

先去创建一个元素类型的节点 … 给这个新创建的节点起个名字 …

var newMember = document.createElement(‘li');

这样我们创建了一个 li 元素节点 ….

下面我们给它里面添加点内容 … 可以直接设置它的 innerText 属性 … 或者,我们也可以创建一个文本节点 … 再把这个文本节点插入到新创建的 li 元素里面 …

var newMemberText = document.createTextNode('张三');

创建文本类型的节点,可以使用 createTextNode() … 节点的内容是 张三 …

下面可以使用 appendChild() 把这个文本节点,添加到之前创建的那个 li 节点里面 …

newMember.appendChild(newMemberText);

最后,我们需要把这个创建的 li 元素,再添加到文档里的某个地方 …

先找到这个 .artist-list 类所在的元素 … 再去调用它的 appendChild() 方法 … 要添加的东西是 newMember …

document.querySelector('.artist-list').appendChild(newMember);

现在, 文档上会出现新列表里的内容 ….

appendChild 只能把它作为最后一样东西插入到指定的节点里面。如果你想把它插入到别的地方 … 可以使用 insertBefore() …

在下面的视频里我们再去看一下这个方法。

在文档中创建并插入新的节点《 JavaScript 基础 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点