克隆节点
-
特殊情况下新增节点按以下操作：
- 复制一个原有的节点
- 把复制的节点放入到指定的元素内部
-
克隆节点
元素.cloneNode(布尔值)- cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
- cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
示例1：
ul.appendChild(ul.children[0].cloneNode(true))
如果是false，只克隆标签，没有内容
示例2：（示例1的分步完整做法）
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
// const li1=document.querySelector('ul li:first-child')
// 克隆节点
const li1 = ul.children[0].cloneNode(true)
console.log(li1);
// 追加
ul.appendChild(li1)
</script>
</body>
删除节点
- 若一个节点在页面中已不需要时，可以删除它
- 在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
- 语法：
父元素.removeChild(要删除的元素) - 注意：
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点（display:none）有区别：隐藏节点还是存在的，但是删除是从html中删除节点
示例：
<body>
<ul>
<li>useless</li>
</ul>
<script>
const ul = document.querySelector('ul')
// 删除节点
ul.removeChild(ul.children[0])
</script>
</body>