HTML文本节点或innerHTML

在本文中，我们将介绍HTML的两种常见文本插入方法：使用文本节点和使用innerHTML。

阅读更多：HTML 教程

HTML文本节点

文本节点是DOM树中的一个节点，用于表示文本内容。在HTML中，文本节点通常用于插入纯文本内容。

创建文本节点

要创建一个文本节点，可以使用JavaScript的document.createTextNode()方法。

<script>
    var text = "Hello, world!";
    var textNode = document.createTextNode(text);
</script>

在上面的示例中，我们首先定义了一个变量text，它包含了要插入的文本内容”Hello, world!”。然后，我们使用document.createTextNode()方法创建了一个文本节点，并将其赋值给变量textNode。

插入文本节点

要将文本节点插入到HTML文档中，我们可以使用appendChild()方法将文本节点添加到指定的HTML元素中。

<script>
    var text = "Hello, world!";
    var textNode = document.createTextNode(text);
    var element = document.getElementById("myElement");
    element.appendChild(textNode);
</script>

在上面的示例中，我们首先通过document.getElementById()方法获取了ID为”myElement”的HTML元素，然后使用appendChild()方法将文本节点textNode添加到该元素中。

示例

下面是一个完整的示例，展示了如何使用文本节点插入文本内容：

<!DOCTYPE html>
<html>
<head>
    <title>HTML TextNode</title>
</head>
<body>
    <h1 id="myElement">示例</h1>

    <script>
        var text = "Hello, world!";
        var textNode = document.createTextNode(text);
        var element = document.getElementById("myElement");
        element.appendChild(textNode);
    </script>
</body>
</html>

在上面的示例中，我们首先定义了一个标题元素<h1>，并设置其ID为”myElement”。然后，在JavaScript代码中，我们创建了一个文本节点并将其插入到了这个标题元素中。运行该示例后，即可在浏览器中看到”Hello, world!”被成功插入到了标题元素中。

innerHTML

除了使用文本节点，还可以使用innerHTML属性来插入HTML文本内容。

插入HTML

innerHTML是DOM元素的一个属性，用于设置或获取元素的HTML内容。要插入HTML文本内容，只需要将要插入的HTML代码作为字符串赋值给innerHTML即可。

<script>
    var html = "<h2>Hello, world!</h2>";
    var element = document.getElementById("myElement");
    element.innerHTML = html;
</script>

在上面的示例中，我们首先定义了一个变量html，它包含了要插入的HTML代码”

Hello, world!

“。然后，我们使用document.getElementById()方法获取了ID为”myElement”的HTML元素，并将该HTML代码赋值给其innerHTML。

示例

下面是一个完整的示例，展示了如何使用innerHTML插入HTML文本内容：

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML</title>
</head>
<body>
    <div id="myElement">示例</div>

    <script>
        var html = "<h2>Hello, world!</h2>";
        var element = document.getElementById("myElement");
        element.innerHTML = html;
    </script>
</body>
</html>