修改文本内容：
<!DOCTYPE html>
<html>
<head>
<title>Change HTML Content</title>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<script>
// 获取元素
var headerElement = document.getElementById("myHeader");
// 修改文本内容
headerElement.textContent = "New Header Text";
</script>
</body>
</html>
在这个例子中，JavaScript 通过 getElementById 获取了 ID 为 "myHeader" 的元素，然后使用 textContent 属性修改了元素的文本内容。
修改 HTML 内容：
<!DOCTYPE html>
<html>
<head>
<title>Change HTML Content</title>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
// 获取元素
var paragraphElement = document.getElementById("myParagraph");
// 修改 HTML 内容
paragraphElement.innerHTML = "<strong>Updated</strong> paragraph content.";
</script>
</body>
</html>
在这个例子中，JavaScript 使用 getElementById 获取了 ID 为 "myParagraph" 的元素，然后通过 innerHTML 属性修改了元素的 HTML 内容。请注意，使用 innerHTML 可能导致 XSS（跨站脚本攻击）风险，因此在插入动态内容时应谨慎使用。
创建和添加新元素：
<!DOCTYPE html>
<html>
<head>
<title>Change HTML Content</title>
</head>
<body>
<div id="myDiv">This is a div.</div>
<script>
// 创建新元素
var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
// 获取父元素
var myDiv = document.getElementById("myDiv");
// 添加新元素到父元素中
myDiv.appendChild(newParagraph);
</script>
</body>
</html>
在这个例子中，JavaScript 使用 createElement 创建了一个新的 <p> 元素，设置了其文本内容，然后使用 appendChild 将新元素添加到 ID 为 "myDiv" 的父元素中。
这些示例展示了如何使用 HTML DOM 通过 JavaScript 来改变 HTML 内容。根据需要，你可以使用不同的 DOM 方法和属性来实现更多复杂的操作。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3547/JavaScript