js insertBefor insertAfter

来源：互联网发布：哈尔滨网络广播直播编辑：程序博客网时间：2024/06/05 06:03

<div class="btns"><input type="button" value="插入元素" id="creatbtn" onclick="insertAfter()"/></div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2" id="p2">2</p>
<p class="con2">3</p>
</div>
<script>
function insertBeforeById() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p2");

newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面

}

function insertBeforeByTag() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementsByTagName("p")[1];

newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面

}

function insertChild() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
//var reforeNode = document.getElementsByTagName("p")[1];
var reforeNode = oTest.childNodes[1]

newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);
}

function insertAfter() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementsByTagName("p")[1];

newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);
}

</script>
</body>

0 0