添加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技术站