insertBefore插入新元素在目标元素之前
作者:
薛定谔的程序 | 来源:发表于
2019-12-24 15:37 被阅读0次<body>
<div id="div">This is a div
<p id="p">div的子节点使用insertBefore将新元素节点插入在这段文字之前</p>
</div>
<a href="JS方法拓展insertAfter.html">
<button>insertAfter</button>
</a>
<script>
let newElement = document.createElement('p');
let newText = document.createTextNode('newElement!');
newElement.appendChild(newText);
let oDiv = document.getElementById('div');
let oP = document.getElementById('p');
console.log(newElement);
console.log(oDiv);
console.log(oP);
//将新创建的new元素添加到div的子节点p之前
oDiv.insertBefore(newElement,oP);
//想将新元素插在一个元素之前话就要知道这个元素的父元素，以div为例用element.parent获取element的父节点
console.log(oDiv.parentNode);//oDiv的父节点是body，给body一个id才能获取它，也可以直接使用oDiv.parentNode获取
oDiv.parentNode.insertBefore(newElement,oDiv);
//因为上面已经有insertBefore将newElement插入到oDiv中，所以document树中已经有newElement元素了，
// 新插入这个元素就会将刚才添加的元素删除，出现在现在插入的位置
//好的到这insertBefore已经吃滴透透滴了！！！下一个是insertAfter这个对应insertBefore是插入在目标元素之后，这个功能原生JS没有给，需要自己封装一insertAfter函数，点击按钮前往！加油
</script>
</body>
image.png
本文标题：insertBefore插入新元素在目标元素之前
本文链接：https://www.haomeiwen.com/subject/bikfoctx.html
网友评论