<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//-----------------------------dom元素的创建--------------------------
//第一种创建方式：document.write();
document.write("<li>我是document.write创建的</li>");
//第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"
//第三种：利用dom的api创建元素
var newLi = document.createElement("li");
newLi.innerHTML = "我是createElement创建的";
// console.log(newLi);
//在父元素的最后面添加元素。
// ul.appendChild(newLi);
//指定位置添加
var li1 = document.getElementById("li1");
ul.insertBefore(newLi,li1);
//----------------------------------元素的操作----------------------------
//document.write();不常用，因为容易覆盖原来的页面。
//innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
//document.createElement;也是比较多的，指定数量的时候一般用它。
//创建，添加，删除，替换
var li2 = document.createElement("li");
li2.innerText = "我是createElement创建的标签，用的是appendChild的方法添加的";
ul.appendChild(li2);
//用insertBefore添加
var li3 = document.createElement("li");
li3.innerText = "我是createElement创建的标签，用的是insertBefore的方法添加的"
//父节点.insertBefore(新节点，参照节点);
ul.insertBefore(li3,li1);
//删除，替换
ul.removeChild(li3);
//父节点.replaceChild(newNode,oldNode);
ul.replaceChild(li3,li2);
//克隆node.cloneNode(true);深层复制。
for(var i=0;i<=3;i++){
var newLi = li3.cloneNode(true);
ul.appendChild(newLi);
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head lang="en">
<me
阅读背景：
jsDOM元素的创建-操作（creatEle）_gyq04551的博客
来源：互联网
分享到：
