更新DOM

Last updated: ... / Reads: 59 Edit

修改innerHTML属性

修改 innerHTML 属性是一种常见的方式，可以通过该属性来设置或获取 HTML 元素的内容。下面是一个简单的示例，演示如何使用 JavaScript 修改元素的 innerHTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改innerHTML示例</title>
</head>
<body>

  <div id="myDiv">原始的 HTML 内容</div>

  <script>
    // 获取元素
    var myDiv = document.getElementById("myDiv");

    // 修改innerHTML属性
    myDiv.innerHTML = "<p>新的 <strong>HTML</strong> 内容</p>";
  </script>

</body>
</html>

在这个例子中，首先通过 document.getElementById("myDiv") 获取到一个具有特定 ID 的元素，然后通过设置其 innerHTML 属性，将元素的 HTML 内容更改为新的内容。

需要注意的是，使用 innerHTML 可能会引起安全性问题，特别是在从用户输入中接收内容时。如果不信任用户提供的内容，最好使用更安全的方法，比如 textContent，以确保不会执行潜在的恶意脚本。

// 更安全的方式：使用 textContent
myDiv.textContent = "新的文本内容";

总体而言，使用 innerHTML 是一种灵活的方式，但在某些情况下需要小心谨慎，特别是在处理用户输入时。

修改innerText或textContent属性

innerText 和 textContent 都是用于获取或设置元素文本内容的属性，但它们有一些区别。

innerText 属性：

  • innerText 返回元素及其后代元素的“渲染”文本内容。它会考虑 CSS 样式和隐藏元素，并只返回实际在页面上可见的文本内容。
  • innerText 不会返回隐藏元素的文本内容，也不会返回通过 CSS 隐藏的元素的文本内容。
var element = document.getElementById("myElement");
console.log(element.innerText); // 返回可见文本内容

textContent 属性：

  • textContent 返回元素及其所有后代元素的文本内容，而不考虑 CSS 样式或元素是否可见。
  • textContent 返回所有文本，包括隐藏元素的文本。
var element = document.getElementById("myElement");
console.log(element.textContent); // 返回所有文本内容

选择使用哪个属性取决于您的需求。如果您只关心在页面上显示的文本内容，并希望考虑 CSS 样式和隐藏元素，那么使用 innerText 是一个不错的选择。如果您需要获取元素及其所有后代元素的原始文本内容，而不受样式和可见性的影响，那么使用 textContent 是更合适的选择。

请注意，与 innerHTML 一样，使用 innerText 或 textContent 时也应注意潜在的安全性问题，特别是在处理用户输入时。

Comments

Make a comment

  • Index