下面就为你详细讲解 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 元素的攻略,希望能对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现创建删除html元素小结 - Python技术站