<div class="btns"><input type="button" value="插入元素" id="creatbtn" οnclick="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 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>
<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>