从0开始学前端第三十一课：创建、插入与删除节点

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135844025

第三十一课：创建、插入与删除节点

学习目标

在本课中，你将学习：

如何使用JavaScript创建新的DOM节点。
掌握不同的节点插入方法，将新节点插入到文档中。
学习如何删除DOM中的现有节点。

学习内容

1. 创建新的DOM节点

在JavaScript中，可以使用document.createElement方法创建新的元素节点。

代码示例:

// 创建一个新的<div>节点
var newDiv = document.createElement('div');

此外，也可以创建文本节点，并将其与元素节点结合。

代码示例:

// 创建文本节点
var newText = document.createTextNode('这是一些文本');
// 将文本节点附加到<div>节点中
newDiv.appendChild(newText);

2. 插入节点

创建节点后，可以使用多种方法将节点插入到DOM中。

appendChild方法:

// 将newDiv添加到body的最后
document.body.appendChild(newDiv);

insertBefore方法:

// 在页面中已有的div之前插入新的div
var existingDiv = document.getElementById('existingDiv');
document.body.insertBefore(newDiv, existingDiv);

3. 删除节点

可以使用removeChild方法来删除DOM中的节点。

代码示例:

// 删除前面创建的newDiv
document.body.removeChild(newDiv);

在较新的浏览器中，可以直接调用remove方法来删除元素。

代码示例:

// 直接删除newDiv
newDiv.remove();

课后练习

创建一个新的<p>元素，添加一些文本，并将其插入到HTML文档的<body>中。
在已有的<ul>列表中，使用insertBefore方法插入一个新的<li>项。
选择文档中的一个元素，并删除它。

练习解析:

练习1:

<script>
  // 创建新的<p>元素
  var newParagraph = document.createElement('p');
  // 创建文本节点
  var paragraphText = document.createTextNode('欢迎学习前端开发！');
  // 将文本节点附加到<p>元素
  newParagraph.appendChild(paragraphText);
  // 将<p>元素添加到body
  document.body.appendChild(newParagraph);
</script>

练习2:

<ul id="myList">
  <li>项目1</li>
  <li>项目2</li>
</ul>

<script>
  var list = document.getElementById('myList');
  var newListItem = document.createElement('li');
  var listItemText = document.createTextNode('新插入的项目');
  newListItem.appendChild(listItemText);
  // 插入新的<li>到第一个<li>之前
  list.insertBefore(newListItem, list.firstChild);
</script>

练习3:

<div id="toBeRemoved">这个元素将被删除</div>

<script>
  var elementToRemove = document.getElementById('toBeRemoved');
  // 删除元素
  elementToRemove.remove();
</script>