极客笔记JS 给 div 赋值
在网页开发中，经常需要通过 JavaScript 来操作 DOM 元素，其中一个常见的操作就是给 div 元素赋值。在本文中，我们将详细介绍如何使用 JavaScript 给 div 元素赋值的方法和示例代码。
方法一：使用 innerHTML 属性
在 JavaScript 中，可以通过 div 元素的 innerHTML 属性来给其赋值。innerHTML 属性用于设置或获取 HTML 元素的内容，我们可以将 HTML 标记和文本字符串赋值给它，从而实现在 div 元素中显示内容。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 给 div 赋值</title>
</head>
<body>
<div id="myDiv"></div>
<script>
var divElement = document.getElementById("myDiv");
divElement.innerHTML = "<h1>Hello, World!</h4>";
</script>
</body>
</html>
在上面的示例中，我们首先在 HTML 中定义了一个 id 为 “myDiv” 的 div 元素，然后通过 JavaScript 获取到该 div 元素，并使用 innerHTML 属性将字符串 ”
Hello, World!
” 赋值给它，最终在网页中显示了 “Hello, World!”。
方法二：使用 textContent 属性
除了 innerHTML 属性，还可以使用 textContent 或 innerText 属性来给 div 元素赋纯文本值。不同之处在于 textContent 会保留标记符号，而 innerText 会将标记符号解析为纯文本。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 给 div 赋值</title>
</head>
<body>
<div id="myDiv"></div>
<script>
var divElement = document.getElementById("myDiv");
divElement.textContent = "Hello, World!";
</script>
</body>
</html>
在上面的示例中，我们使用 textContent 属性将字符串 “Hello, World!” 赋值给 div 元素，从而在网页中显示了相同的文本内容。
方法三：使用 createTextNode 方法
除了直接给 innerHTML、textContent 或 innerText 赋值外，还可以使用 document.createTextNode() 方法创建文本节点，然后将文本节点添加到 div 元素中，实现给 div 元素赋值的效果。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 给 div 赋值</title>
</head>
<body>
<div id="myDiv"></div>
<script>
var divElement = document.getElementById("myDiv");
var textNode = document.createTextNode("Hello, World!");
divElement.appendChild(textNode);
</script>
</body>
</html>
在上面的示例中，我们首先使用 document.createTextNode() 方法创建了一个文本节点，然后通过 appendChild() 方法将该文本节点添加到了 div 元素中，最终在网页中显示了文本内容 “Hello, World!”。
方法四：使用 innerText 属性
与 innerHTML 类似，innerText 属性也可以用来给 div 元素赋文本值，但其会忽略 HTML 元素和标记符号，仅显示纯文本内容。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS 给 div 赋值</title>
</head>
<body>
<div id="myDiv"></div>
<script>
var divElement = document.getElementById("myDiv");
divElement.innerText = "Hello, World!";
</script>
</body>
</html>
在上面的示例中，我们使用 innerText 属性将字符串 “Hello, World!” 赋值给 div 元素，从而在网页中显示了相同的纯文本内容。
总结
通过本文的介绍，我们详细学习了使用 JavaScript 给 div 元素赋值的方法，包括使用 innerHTML、textContent、createTextNode 和 innerText 属性。在实际开发中，可以根据具体需要选择合适的方法来给 div 元素赋值，从而实现页面内容的动态更新和展示。