关于“JS添加或删除HTML dom元素的方法实例分析”的攻略,我将会为您提供一些详尽的说明。
添加HTML DOM元素
使用 JavaScript 来动态添加 HTML DOM 元素,对于网站交互性、用户体验以及动画效果的实现是非常有帮助的。
1. 使用 createElement 方法添加元素
createElement 方法可以创建一个指定的 HTML 元素。此方法返回一个新的元素,但是它不会将其插入到文档中,需要使用其他的方法来实现。
下面是一个创建一个 p 元素并将其添加到 body 的示例:
<!DOCTYPE html>
<html>
<head>
<title>create element demo</title>
</head>
<body>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
<div id="div1">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
代码中的 createElement
方法创建了一个 p
元素,并且使用 appendChild
方法将其添加到了 div
元素中。
2. 使用 innerHTML 方法添加元素
innerHTML 方法用于获取或设置 HTML 元素的内容。如果将一个新的 HTML 代码字符串放置到 innerHTML 中,它将替换原来的内容。
下面是一个使用 innerHTML 方法创建一个新段落并将其添加到 body 中的示例:
<!DOCTYPE html>
<html>
<head>
<title>inner HTML demo</title>
</head>
<body>
<script>
document.getElementById("myDiv").innerHTML = "<p>Hello World!</p>";
</script>
<div id="myDiv">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
代码中的 innerHTML
方法将一个新的 HTML 代码字符串 <p>Hello World!</p>
添加到了 div
元素中。
删除HTML DOM元素
1. 使用 removeChild 方法删除元素
removeChild 方法用于删除指定的节点。该方法从子节点列表中删除指定节点并返回被删除的节点。被删除的节点会保留在内存中,可以在以后再使用它。
下面是一个删除 div 元素中的一个 p 元素的示例:
<!DOCTYPE html>
<html>
<head>
<title>remove child demo</title>
</head>
<body>
<script>
var parent = document.getElementById("div1");
var child = parent.getElementsByTagName("p")[0];
parent.removeChild(child);
</script>
<div id="div1">
<h1>This is a heading</h1>
<p>This is the paragraph to be removed.</p>
<p>This paragraph should remain.</p>
</div>
</body>
</html>
代码中的 removeChild
方法从 div
元素的子节点列表中删除了第一个 p
元素。
2. 使用 innerHTML 方法删除元素
可通过设置 innerHTML 属性的值为 '' 来将一个元素的所有子节点删除。下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<title>inner HTML demo</title>
</head>
<body>
<script>
document.getElementById("myDiv").innerHTML = "";
</script>
<div id="myDiv">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
代码中的 innerHTML
方法将 myDiv
中的子元素删除。
以上是两个示例,希望对您有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS添加或删除HTML dom元素的方法实例分析 - Python技术站