我们可以获取到文档里面的节点，修改节点的内容，我们还可以创建新的节点，然后把它插入到文档里面 … 创建新的节点，可以使用 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() …

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