📌  相关文章
📜  js 在 div 之后添加文本 - Javascript (1)

📅  最后修改于: 2023-12-03 14:43:31.032000             🧑  作者: Mango

JS 在 div 之后添加文本 - JavaScript

本文介绍了如何在 HTML 中使用 JavaScript 在 div 元素之后添加文本。

HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 在 div 之后添加文本</title>
</head>
<body>
  <div id="myDiv"></div>

  <script src="script.js"></script>
</body>
</html>

在上述的 HTML 代码中，我们定义了一个空的 div 元素，它的 id 属性为 "myDiv"。我们将会使用 JavaScript 在该 div 之后添加文本。

JavaScript 代码如下：

// 获取 div 元素
const div = document.getElementById("myDiv");

// 创建文本节点
const textNode = document.createTextNode("这是通过 JavaScript 添加的文本。");

// 在 div 之后插入文本节点
div.parentNode.insertBefore(textNode, div.nextSibling);

在上述的 JavaScript 代码中，我们通过 document.getElementById() 方法获取到了 div 元素，并将其存储在了变量 div 中。

然后，我们使用 document.createTextNode() 方法创建了一个文本节点，并将文本内容设置为 "这是通过 JavaScript 添加的文本。"。

最后，我们使用 div.parentNode.insertBefore() 方法在 div 元素之后插入了文本节点。

当我们在浏览器中运行以上代码时，就会在页面上的该 div 元素之后添加文本。

希望本文对你理解如何在 div 元素之后添加文本有所帮助！