js DOM节点操作之创建、添加、删除和克隆节点

1. 创建节点

document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。

<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul>
</body>
<script>const li = document.createElement("li");
</script>

结果如下：

document.createElement(“tagName”)只是用来创建节点的，如果想要添加到某个元素里面，就需要使用添加节点的方法。

2. 添加节点

node.appendChild(child)：将一个节点(child)添加到指定父节点(node)的子节点列表的末尾；

node.insertBefore(child，指定元素)：将一个元素(child)添加到父节点(node)中指定子节点的前面。

<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul>
</body>
<script>const ul = document.querySelector("ul");const li = document.createElement("li");const li1 = document.createElement("li");li.innerHTML = "hi";li1.innerHTML = "hello";ul.appendChild(li);ul.insertBefore(li1, ul.children[0])
</script>

结果如下：

3. 删除节点

node.removeChild(child)：从父节点(node)中删除一个子节点(child)，返回被删除的节点。

<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul>
</body>
<script>const ul = document.querySelector("ul");ul.removeChild(ul.children[0]);
</script>

结果如下：

4. 复制节点(克隆节点)

node.cloneNode(flag)：返回调用该方法的一个节点副本，flag是一个布尔值，如果flag为false或者直接是node.cloneNode()，则相当于浅拷贝，只拷贝元素节点，不拷贝内容，如果flag为true，相当于深拷贝，拷贝元素节点包括内容。

注意：拷贝完之后需要使用添加方法才能添加到某个元素内。

浅拷贝

<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul>
</body>
<script>const ul = document.querySelector("ul");const li = ul.children[0];const cloneLi = li.cloneNode();// 不包含文本ul.insertBefore(cloneLi, li);
</script>

结果如下：

深拷贝

<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul>
</body>
<script>const ul = document.querySelector("ul");const li = ul.children[0];const cloneLi = li.cloneNode(true);// 包含文本ul.insertBefore(cloneLi, li);
</script>

深拷贝结果如下：

js DOM节点操作之创建、添加、删除和克隆节点相关推荐

JS小功能(操作Table--动态添加删除表格及数据)实现代码
效果: [在新窗口打开图片] 代码: 代码如下: <head runat="server"> <title></title> < ...
java document创建节点_javasript 的DOM 节点操作：创建，插入，删除，复制以及查找节点...
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)
一,创建节点 document.createElement('li'),//创建一个节点二,添加节点 insertBefore(要添加的节点, 添加在哪个节点之前) 在指定节点前面添加三,获取节点 ...
js 节点相关内容介绍创建、删除、复制节点
目录 1.节点介绍 2.案例-下拉菜单 3.兄弟节点 4.创建节点 5.案例-简单发布留言 6.删除节点 7.复制节点(克隆节点) 1.节点介绍 1.为什么要学习节点可以利用父子兄节点关系获取元素 ...
js的节点操作动态创建table表格，创建行，删除行
节点操作根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...
JS----DOM节点操作：创建，插入，删除，复制，查找节点
摘自:https://blog.csdn.net/torrex/article/details/54376633 一.创建节点.追加节点 1.createElement(标签名)创建一个元素节点(具体 ...
节点操作之创建和添加节点
1.创建节点 document.createElement('tagName') document.createElement() 方法创建由tagName指定的HTML元素,因为这些元素原先不存在, ...
Three.js中实现点击按钮添加删除旋转立方体
场景 Three.js中引入dat.gui库实现界面组件控制动画速度变量: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1193 ...

js DOM节点操作之创建、添加、删除和克隆节点

1. 创建节点

2. 添加节点

3. 删除节点

4. 复制节点(克隆节点)

浅拷贝

深拷贝

js DOM节点操作之创建、添加、删除和克隆节点相关推荐

最新文章

热门文章