大家好，又见面了，我是你们的朋友全栈君。
1.insertBefore添加元素到指定位置
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul id="sel">
</ul>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
var li = document.createElement('li');
li.innerText = 'abcd';
//把li插入到ul的第一个位置
var ul = document.getElementById('ul');
//insertBefore
//ul.insertBefore(li, ul.children[0]); //insertBefore(要添加的元素,已添加的元素)
ul.insertBefore(li, ul.children[0].nextElementSibling);//添加到指定元素后面
</script>
2.appendChild 添加子节点到父节点的末尾
var btn = document.getElementById('btn');
btn.onclick = function () {
var li = document.createElement('li');
li.innerText = 'abcd';
//把li插入到ul的第一个位置
var ul = document.getElementById('ul');
var div = document.createElement('div');
div.innerText = 'div';
ul.append(div);
//appendChild
var sel = document.getElementById('sel');
//如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
//本来div节点会被添加到#ul上,但是sel.添加了div,所以#ul没有div节点
sel.appendChild(div); //将原来div的位置 添加到 #sel中,原先的会消失
//var cloneNode = div.cloneNode(true); //cloneNode 生成的克隆节点, div被克隆的节点,
//cloneNode.innerText = 'test';
//sel.appendChild(cloneNode); //克隆解决原节点转移位置
3.replaceChild 替换子节点
var div = document.createElement('div');
div.innerText = 'div';
ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/152064.html原文链接：https://javaforall.net
