js 插入html

作者：断晴星魂发布日期:2025-07-21 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>JS 插入 HTML 示例</title>
</head>
<body>
    <h1>使用 JavaScript 插入 HTML 内容</h1>
    <div id="content"></div>

    <script>
        // 创建一个新的 p 元素
        var paragraph = document.createElement("p");

        // 创建文本节点并添加到 p 元素中
        var textNode = document.createTextNode("这是通过 JavaScript 插入的 HTML 内容。");
        paragraph.appendChild(textNode);

        // 将 p 元素添加到页面中的 div 中
        var container = document.getElementById("content");
        container.appendChild(paragraph);
    </script>
</body>
</html>

解释说明：

创建元素：使用 document.createElement() 方法创建一个新的 HTML 元素（例如 <p> 标签）。
创建文本节点：使用 document.createTextNode() 方法创建一个文本节点，并将文本内容传递给它。
添加文本节点到元素：使用 appendChild() 方法将文本节点添加到新创建的 <p> 元素中。
获取容器元素：使用 document.getElementById() 方法获取页面中已有的容器元素（例如 <div>），并将其存储在一个变量中。
插入元素到页面：再次使用 appendChild() 方法将新创建的 <p> 元素添加到容器元素中，从而将其插入到页面中。

这样，JavaScript 代码会在页面加载时动态地创建并插入新的 HTML 内容。

上一篇：js 获取页面宽度

下一篇：js pop