如何在 div 中写入文本

在 HTML 中，可以使用 <div> 元素来定义一个容器。如果希望在 div 中写入文本，可以使用以下方法：

方法一：使用文本节点

可以在 div 中添加一个文本节点，包含要显示的文本内容。示例代码如下：

<div id="myDiv"></div>

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

上面的代码会在 myDiv 中添加一个文本节点，内容为 Hello, world!。

方法二：使用 innerHTML 属性

可以使用 innerHTML 属性设置 div 中的 HTML 内容。示例代码如下：

<div id="myDiv"></div>

<script>
    var div = document.getElementById("myDiv");
    div.innerHTML = "Hello, <strong>world</strong>!";
</script>

上面的代码会在 myDiv 中添加一段 HTML 内容，包含一段加粗的文本 world。

需要注意：使用 innerHTML 属性可能存在 XSS（跨站脚本攻击）的风险，因此需要避免将未经过滤的用户输入当做 HTML 内容插入到页面中。

方法三：使用 textContent 或 innerText 属性

可以使用 textContent 或 innerText 属性设置 div 中的文本内容。它们与 innerHTML 不同的是，不会将输入的内容解释为 HTML，而是直接作为纯文本显示。示例代码如下：

<div id="myDiv"></div>

<script>
    var div = document.getElementById("myDiv");
    div.textContent = "Hello, <strong>world</strong>!";
    // 或者
    div.innerText = "Hello, <strong>world</strong>!";
</script>

上面的代码会在 myDiv 中添加一段纯文本内容，包含一段带有 HTML 标签的文本 Hello, <strong>world</strong>!。

需要注意：innerText 是非标准属性，只适用于 IE 浏览器。因此，建议使用 textContent 属性来设置文本内容。