在JavaScript中改变HTML内容是非常常见的操作。你可以使用多种方法来访问和修改HTML文档中的元素。以下是一些常见的方法和示例：
1. 使用 innerHTML
innerHTML 属性可以用于获取或设置元素的 HTML 内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change HTML Content</title>
</head>
<body>
<div id="content">Old Content</div>
<button id="changeContentBtn">Change Content</button>
<script>
document.getElementById('changeContentBtn').addEventListener('click', () => {
document.getElementById('content').innerHTML = 'New Content';
});
</script>
</body>
</html>
2. 使用 textContent
textContent 属性用于获取或设置元素的文本内容，不会解析HTML标签。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Content</title>
</head>
<body>
<div id="textContent">Old Text</div>
<button id="changeTextBtn">Change Text</button>
<script>
document.getElementById('changeTextBtn').addEventListener('click', () => {
document.getElementById('textContent').textContent = 'New Text';
});
</script>
</body>
</html>
3. 使用 innerText
innerText 属性与 textContent 类似，但它会考虑CSS样式（如display: none）并会触发重新渲染。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Inner Text</title>
</head>
<body>
<div id="innerText">Old Inner Text</div>
<button id="changeInnerTextBtn">Change Inner Text</button>
<script>
document.getElementById('changeInnerTextBtn').addEventListener('click', () => {
document.getElementById('innerText').innerText = 'New Inner Text';
});
</script>
</body>
</html>
4. 使用 setAttribute 和 getAttribute
这些方法可以用于设置或获取元素的属性值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Attributes</title>
</head>
<body>
<img id="myImage" src="old-image.jpg" alt="Old Image">
<button id="changeImageBtn">Change Image</button>
<script>
document.getElementById('changeImageBtn').addEventListener('click', () => {
const image = document.getElementById('myImage');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'New Image');
});
</script>
</body>
</html>
5. 使用 classList 来修改类名
classList 提供了对元素的类名的操作方法，比如 add、remove、toggle 和 contains。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Class Name</title>
<style>
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>
<p id="myText" class="red">This is some text.</p>
<button id="toggleClassBtn">Toggle Class</button>
<script>
document.getElementById('toggleClassBtn').addEventListener('click', () => {
const text = document.getElementById('myText');
text.classList.toggle('blue');
text.classList.toggle('red');
});
</script>
</body>
</html>
6. 动态创建和插入元素
你可以使用 document.createElement 和 appendChild 方法来动态创建并插入元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Element Creation</title>
</head>
<body>
<div id="container"></div>
<button id="addElementBtn">Add Element</button>
<script>
document.getElementById('addElementBtn').addEventListener('click', () => {
const container = document.getElementById('container');
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
container.appendChild(newElement);
});
</script>
</body>
</html>
7. 修改表单元素的值
你可以使用 value 属性来获取或设置表单元素的值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Form Value</title>
</head>
<body>
<input type="text" id="myInput" value="Initial value">
<button id="changeValueBtn">Change Value</button>
<script>
document.getElementById('changeValueBtn').addEventListener('click', () => {
document.getElementById('myInput').value = 'New value';
});
</script>
</body>
</html>
8. 插入HTML内容
可以使用 insertAdjacentHTML 方法在现有元素的特定位置插入HTML内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert HTML Content</title>
</head>
<body>
<div id="container">Original content.</div>
<button id="insertHtmlBtn">Insert HTML</button>
<script>
document.getElementById('insertHtmlBtn').addEventListener('click', () => {
const container = document.getElementById('container');
container.insertAdjacentHTML('beforeend', '<p>Inserted content.</p>');
});
</script>
</body>
</html>
总结
这些方法展示了如何使用JavaScript来操作和修改HTML文档中的内容。根据你的具体需求，你可以选择合适的方法来实现所需的效果。