<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
网友评论