js追加子元素

<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("divid1");

var span=document.createElement("span");
span.id="spanid";
span.style.color="blue";
span.innerHTML=" i am append span !"
//div.appendChild(span);

// .parentNode 父节点
div.parentNode.insertBefore(span,div);

}
</script>
</head>
<body>

<div id="divid" style="color: red; font-size:80;">i am div !
<div id="divid1" style="color: red; font-size:80;">i am div !</div>
</div>
</body>
</html>

在页面加载完毕后，向div元素追加span子元素。

Html代码

<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("divid");
var span=document.createElement("span");
span.id="spanid";
span.style.color="blue";
span.innerHTML=" i am append span !"
div.appendChild(span);
}
</script>
</head>
<body>
<div id="divid" style="color: red; font-size:80;">i am div !</div>
</body>
</html>

js创建与追加元素

用javascript创建元素：

1 var NewNode = document.creatElement('div');

结合appendChild与insertBefore插入到DOM树中

insertBefore：语法：

var insertedNode = parentNode.insertBefore(newNode,referenceNode)

例子

<div>
<button onclick="creatEle" id="btn">点击创建新btn</button>
<div>

<script>
//创建一个新btn
var newBtn = document.creatElement('button');
newBtn.value="value";
newBtn.style.width = 50px;
newBtn.style.height = 50px;
//追加新创建的btn
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
//parentNode.insertBefore(newBtn,oldBtn);//在原有btn的前面插入新创建的btn；
parentNode.insertBefore(newBtn,oldBtn.nextSiblings)//将在原有btn的后面插入新创建的btn，！！！原因是没有insetAfter！！所以用nextSiblings
</script>

appendChild 语法

var aChild = element.appendChild(aChild);

例子

//html结构见上
var newBtn = document.creatElement('button');var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
parentNode.appendChild(newBtn);


//MDN 例子var p = document.createElement("p");
document.body.appendChild(p);

总结：两者都是在父元素内追加子元素，insertBefore可以通过referenceNode.siblings向后插入子元素。

相关文章