您的位置：首页 > Web前端 > JavaScript

JS 中DOM节点的操作

2017-02-16 15:53 162 查看

1、创建节点

使用方法是这样的document.createElement();

新的标签（节点） = document.createElement(“标签名”);

2、插入节点

使用方法：父节点.appendChild();

父节点.appendChild(新节点); 父节点的最后插入一个新节点

使用方法：父节点.insertBefore(要插入的节点，参考节点)；

父节点.insertBefore(新节点,参考节点)在参考节点前插入;

如果参考节点为null，那么他将在节点最后插入一个节点。

3、删除节点

用法：用父节点删除子节点。

父节点.removeChild（子节点）；必须制定要删除的子节点

节点自己删除自己：

不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)

4、复制节点

想要复制的节点调用这个函数cloneNode()，得到一个新节点。方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。

新节点=要复制的节点.cloneNode(参数); 参数可选复制节点

用于复制节点，接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不要的</title>
</head>
<body>

<div id="box1">

<div id="box2" ></div>

</div>

<script type="text/javascript">

//获取box2
var box2=document.getElementById('box2');

//1、创建节点 div标签

var newnode1=document.createElement('div');

//1、添加节点
box2.appendChild(newnode1);

var newnode2=document.createElement('hr');
// 3、在box2前面插入节点
box2.parentNode.insertBefore(newnode2,box2);

//4、删除节点（用父结点删除子节点）
box2.removeChild(newnode1);

// 5、不知道父结点的情况下，删除节点
newnode2.parentNode.removeChild(newnode2);

// 6、浅复制

var box1=box2.parentNode;

var cc=box1.cloneNode();

// 7、深复制
var dd=box1.cloneNode(true);

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航