根据insertBefore()衍生出来的insertAfter()函数

最新推荐文章于 2023-09-06 20:24:21 发布

转载最新推荐文章于 2023-09-06 20:24:21 发布 · 352 阅读

文章标签：

#null

javascript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用JavaScript进行DOM操作，包括创建新元素、设置元素内容及插入元素到指定位置等基本操作。通过实例展示了如何利用`document.createElement`, `innerHTML`属性和`insertBefore`方法来动态修改网页结构。

 function insertAfter(newElement.targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("h2");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,null);
var newNode1 = document.createElement("h3");
newNode1.innerHTML = "This is a test 333";
oTest.insertBefore(newNode1,newNode);
</script>
<script type="text/javascript">
var oTest = document.getElementById("test");
var x1= document.getElementById("x1");
var x2= document.getElementById("x2");
var newNode = document.createElement("h2");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,x2.previousSibling);
</script>
<script type="text/javascript">
var oTest = document.getElementById("test");
var x2= document.getElementById("x2");
var newNode = document.createElement("h2");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,x2);
</script>
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("h2");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[1]);
</script>