HTML DOM - 修改 HTML 内容的方法

修改 HTML 内容的方法

通过 JavaScript 操作 DOM（文档对象模型）可以动态修改 HTML 内容。以下是几种常见的方法：

innerHTML 属性 使用 innerHTML 属性可以获取或设置元素的 HTML 内容。这种方法会解析字符串中的 HTML 标签。

javascript 复制代码

document.getElementById("demo").innerHTML = "<strong>新内容</strong>";

textContent 属性 textContent 属性用于获取或设置元素的文本内容，不会解析 HTML 标签。

javascript 复制代码

document.getElementById("demo").textContent = "纯文本内容";

innerText 属性 innerText 属性与 textContent 类似，但会忽略隐藏元素的内容。

javascript 复制代码

document.getElementById("demo").innerText = "可见文本内容";

修改 HTML 属性

除了内容，还可以通过 DOM 修改 HTML 元素的属性。

setAttribute 方法 使用 setAttribute 方法可以设置元素的属性值。

javascript 复制代码

document.getElementById("myImage").setAttribute("src", "new-image.jpg");

直接修改属性 某些属性可以直接通过元素对象修改。

javascript 复制代码

document.getElementById("myImage").src = "new-image.jpg";

创建和插入新元素

可以通过 DOM 动态创建新元素并插入到文档中。

createElement 方法 使用 createElement 方法创建新元素。

javascript 复制代码

var newElement = document.createElement("div");
newElement.innerHTML = "新创建的 div";

appendChild 方法 使用 appendChild 方法将新元素添加到父元素的末尾。

javascript 复制代码

document.body.appendChild(newElement);

insertBefore 方法 使用 insertBefore 方法将新元素插入到指定元素之前。

javascript 复制代码

var parent = document.getElementById("parent");
var referenceElement = document.getElementById("reference");
parent.insertBefore(newElement, referenceElement);

删除和替换元素

可以通过 DOM 删除或替换现有元素。

removeChild 方法 使用 removeChild 方法从父元素中删除子元素。

javascript 复制代码

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child);

replaceChild 方法 使用 replaceChild 方法替换子元素。

javascript 复制代码

var parent = document.getElementById("parent");
var oldChild = document.getElementById("oldChild");
var newChild = document.createElement("div");
newChild.innerHTML = "新内容";
parent.replaceChild(newChild, oldChild);

修改 CSS 样式

通过 DOM 可以动态修改元素的 CSS 样式。

style 属性 使用 style 属性直接修改元素的样式。

javascript 复制代码

document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "20px";

className 属性 使用 className 属性修改元素的类名。

javascript 复制代码

document.getElementById("demo").className = "new-class";

classList 属性 使用 classList 属性可以更方便地添加、删除或切换类名。