JavaScript 改变 HTML 内容
JavaScript 是一种强大的脚本语言，它允许开发者与 HTML 文档进行交互，包括修改元素的内容、属性、样式等。本文将详细讲解如何使用 JavaScript 来改变 HTML 内容，并提供代码示例。
1. 改变元素的文本内容
方法一：textContent
textContent 属性可以用来获取或设置元素的文本内容，包括元素的所有后代的文本。
// 获取元素
var element = document.getElementById('myElement');
// 设置文本内容
element.textContent = 'Hello, World!';
// 获取文本内容
console.log(element.textContent); // 输出: Hello, World!
方法二：innerText
innerText 属性与 textContent 类似，但它会考虑 CSS 样式，即如果文本被样式隐藏，innerText 不会返回这部分内容。
var element = document.getElementById('myElement');
element.innerText = 'Styled Text';
2. 改变元素的 HTML 内容
方法：innerHTML
innerHTML 属性可以用来获取或设置元素的 HTML 内容，包括元素的所有后代的 HTML。
var element = document.getElementById('myElement');
// 设置 HTML 内容
element.innerHTML = '<b>Hello, World!</b>';
// 获取 HTML 内容
console.log(element.innerHTML); // 输出: <b>Hello, World!</b>
3. 创建和添加元素
方法：createElement 和 appendChild
使用 document.createElement 可以创建一个新的 HTML 元素，然后使用 appendChild 方法将其添加到现有元素中。
// 创建一个新的 div 元素
var newDiv = document.createElement('div');
// 设置新元素的内容
newDiv.textContent = 'New Div';
// 获取父元素
var parentElement = document.getElementById('myElement');
// 将新元素添加到父元素中
parentElement.appendChild(newDiv);
4. 替换元素
方法：replaceChild
使用 replaceChild 方法可以替换一个元素的子元素。
// 创建一个新的 span 元素
var newSpan = document.createElement('span');
newSpan.textContent = 'New Span';
// 获取要替换的元素
var oldElement = document.getElementById('oldElement');
// 获取父元素
var parentElement = oldElement.parentNode;
// 替换元素
parentElement.replaceChild(newSpan, oldElement);
5. 删除元素
方法：removeChild
使用 removeChild 方法可以从其父元素中删除一个元素。
// 获取要删除的元素
var elementToRemove = document.getElementById('elementToRemove');
// 获取父元素
var parentElement = elementToRemove.parentNode;
// 删除元素
parentElement.removeChild(elementToRemove);
6. 代码示例
假设我们有一个简单的 HTML 页面，包含一个按钮和一个段落，我们想要在点击按钮时改变段落的文本内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change HTML Content Example</title>
</head>
<body>
<button id="changeTextBtn">Change Text</button>
<p id="myParagraph">Original text.</p>
<script>
// 获取按钮和段落元素
var changeTextBtn = document.getElementById('changeTextBtn');
var myParagraph = document.getElementById('myParagraph');
// 为按钮添加点击事件处理程序
changeTextBtn.addEventListener('click', function() {
// 改变段落的文本内容
myParagraph.textContent = 'The text has been changed!';
});
</script>
</body>
</html>
