我们先用一个 removeChild() … 删除掉刚才插入的东西 ..

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

我们可以先把获取到的 .artist-list 这个类所在的元素起个名字 … var artistList = document.querySelector('.artist-list');

然后调用 artistList 的 insertBefore() 这个方法 …

artistList.insertBefore(newMember, artistList.firstChild)

这个方法有两个参数 … 第一个参数是要插入的内容 … 第二个参数是插入的位置 … 我们可以把新内容放在 artistList 的第一个子节点这里 …

回车 … 现在， 新添加的列表项目，会在乐队成员列表的第一的位置上 …

下面我们可以再试一下这个 insertBefore() 方法 … 在 ul 元素的上面添加一个标题元素 … 先去创建这个元素 …

var bandMember = document.createElement('h3')

再设置一下它的内部的文字 … bandMember.innerText = ’乐队成员：’;

再去把这个 bandMember 插入到 ul 元素的上面 .. 也就是新添加的这个 h3 元素，跟这个 ul 元素是兄弟 … 所以我们需要在这个 ul 元素的父节点去应用这个 insertBefore() 方法 …

插入 bandMember 的时候，参考的那个元素，应该是 乐队成员列表 的上一个兄弟节点 ….

artistList.parentNode.insertBefore(bandMember, artistList.previousSibling)

这行代码的意思就是，在 乐队成员列表 的父节点上，把 bandMember ，也就是我们创建的这个 h3 元素，插入到 乐队成员列表 的上一个子节点这个位置上 …

在文档上，你会看到，这个 h3 元素，会显示在列表元素的上面 ….