DOM基础操作

Posted 2021-01-22 pandawind

插入操作

1.appendChild(child);

这个是父级调用的方法，它会将child元素插入到父级里面，而且是放到逻辑后面的位置上。

 1  div.appendChild(text); 2 div.appendChild(comment);  

javascript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这样div里面就会有一行文本一行注释。

这里如果是我们创建的元素，那么appendChild就是把新元素插入进去，但是如果是DOM里面已经存在的元素，那么appendChild就是把这个已经存在的元素给剪切掉，然后放到新的位置上。

2.insertBefore(a, b);

这个依然是父节点调用的方法，它的意思是将a插入到b前面的位置上，其中b要求是这个父级的子节点。这个方法可以记作为 insert a before b;

 1  var span = document.createElement(‘span’); 2 div.insertBefore(span, comment);  

JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这样我们就把一个span元素插入到了刚才的注释文本前面。