<script>
window.onload = function () {
let oDiv = document.getElementById('div');
let text = document.getElementById('text');
let text2 = document.getElementById('text2');
//创建新元素
let newElement = document.createElement('p');
let newElementTextNode = document.createTextNode('newElement!');
newElement.appendChild(newElementTextNode);
//新元素使用appendChild默认添加在父元素的所有子元素末尾
// text2.append(newElement);//添加为text2的子节点
// oDiv.appendChild(newElement);//所有子节点末尾,有标签,有内容
// oDiv.insertBefore(newElementTextNode,null);
//如果参照节点为null则新元素添加在父节点的子节点末尾,添加后看不到标签只有内容
//oDiv.insertBefore(newElement,text2);
//也就是js提供的appendChild和insertBefore已经足以将新元素添加在任意位置,不过有的面试可能会让写一个insertAfter函数:
insertAfter(newElement,text);
};
function insertAfter(newElement,targetElement) {
let Parent = targetElement.parentNode;
if (Parent.lastChild == targetElement.parentNode){
Parent.appendChild(newElement);
}else{
Parent.insertBefore(newElement,targetElement.nextSibling);
}
}
</script>
</head>
<body>
<b>JS有appendChild方法和insertBefore方法,但却没有insertAfter,想实现插入在目标元素下面的功能,可以自己封装一个</b>
<div id="div">
<p id="text">div下的一个节点,使用方法insertAfter将新元素添加到该节点之后</p>
<p id="text2">我是text2新元素
添加再我之前</p>
</div>
</body>

image.png
网友评论