<!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>
jsDOM元素的创建-操作(creatEle)
最新推荐文章于 2024-08-11 00:22:53 发布