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节点操作之创建 添加 删除和克隆节点》对你有帮助,请点赞、收藏,并留下你的观点哦!