1.CRUD(增,删,改,查):
- 增,即创建节点:createElement(tagName),
tagName是需要创建的标签名
<body>
<div id="box">
<p id="text">it's a nice day!</p>
<button id="btn">我是一个按钮</button>
<p>我会不会被删掉?</p>
</div>
<script type="text/html">
var box=document.getElementById("box");
//增,即创建节点(添加一个img标签)
var img=document.createElement("img");
//给img标签添加属性
img.src="./images/pic1.jpg";
img.width=200;
img.height=200;
/*在box最后添加img图片;
box.appendChild(img);
*/
/*
//可以在box任意位置添加img标签
//在button前添加img标签;
var btn=document.getElementById("btn");
box.insertBefore(img,btn);
*/
//在p标签前添加img标签;
var text=document.getElementById("text");
box.insertBefore(img,text);
</script>
</body>
样式:
<style> #box{ width: 400px; height: 400px; background-color: pink; } </style>
- 删,即删除节点;有两种方法
<script> //删,即删除节点 var text=document.getElementById("text"); //方法一,先获取父节点,然后调用removeChild(需要删除的标签名); var fatherNode=text.parentNode; fatherNode.removeChild(text); //方法二,直接调用remove()方法 var btn=document.getElementById("btn"); btn.remove(); console.log(fatherNode.children); </script>
- 复制节点,oldeNode.cloneNode(true);
想要复制的节点调用函数cloneNode(参数),得到一个新节点,参数是布尔类型,true表示深复制,false表示浅复制
代码块:
<script> //复制节点, 新节点=要复制的节点.cloneNode(boolean类型的参数); var box=document.getElementById("box"); var newBox=box.cloneNode(false); //浅复制,只复制一层; console.log(newBox); var newBox2=box.cloneNode(true); //深复制,复制全部; console.log(newBox2); </script>
运行结果:
- 插入节点:
1).父节点.appendChild(新节点),在父节点最后插入一个节点;
2).父节点.insertBefore(新节点,参考节点);在参考节点前插入,如果参考节点为Null,则在节点最后插入一个节点