js实现创建删除html元素小结

下面就为你详细讲解 js 实现创建删除 HTML 元素的完整攻略。

1. 使用 createElement() 函数创建 HTML 元素

要创建新的 HTML 元素，需要使用 JavaScript 中的 createElement() 函数。该函数接收一个参数，指定新创建元素的类型。可以根据需要给新元素设置属性和内容，最后将其添加到文档中。

例如，下面的 JS 代码可以创建一个新的 <div> 元素，并设置其 id 为 myDiv，文本内容为 "This is a new div."，然后将其添加到 body 元素末尾处：

var newDiv = document.createElement("div");  // 创建新的 <div> 元素
newDiv.id = "myDiv";  // 设置新元素的 id 属性
newDiv.textContent = "This is a new div."; // 设置新元素的文本内容
document.body.appendChild(newDiv);  // 将新元素添加到 body 元素末尾处

2. 使用 insertAdjacentHTML() 函数创建 HTML 元素

除了使用 createElement() 函数外，还可以使用 insertAdjacentHTML() 函数来创建新的 HTML 元素。该函数接收两个参数，第一个参数是一个字符串，指定待插入 HTML 片段的位置；第二个参数是一个字符串，指定待插入的 HTML 内容。

例如，下面的 JS 代码可以在 body 元素的末尾处插入一个新的 <div> 元素，内容为 "This is a new div."：

var newDiv = '<div id="myDiv">This is a new div.</div>';  // 新的 HTML 片段
document.body.insertAdjacentHTML('beforeend', newDiv);  // 在 body 元素末尾处插入新的 HTML 片段

3. 使用 removeChild() 函数删除 HTML 元素

要删除 HTML 元素，可以使用 JavaScript 中的 removeChild() 函数。该函数接收一个参数，指定要删除的元素。如果该元素是其父元素的唯一子元素，那么同时也会删除其父元素。

例如，下面的 JS 代码可以删除 id 为 myDiv 的元素：

var divToDelete = document.getElementById('myDiv');  // 获取要删除的元素
divToDelete.parentNode.removeChild(divToDelete);  // 删除元素

以上就是关于 JS 实现创建和删除 HTML 元素的攻略，希望能对你有所帮助。