📌  相关文章
📜  HTML | DOM innerHTML 属性(1)

📅  最后修改于: 2023-12-03 15:31:11.945000             🧑  作者: Mango

HTML | DOM innerHTML 属性

简介

在 HTML 页面中，能够改变元素内容最常用的方法是使用 innerHTML 属性。innerHTML 属性可以设置或返回 HTML 元素的内容。

语法
element.innerHTML = html_content;
  • element：要设置或返回 HTML 内容的元素；
  • html_content：要设置的 HTML 内容。
示例
<!DOCTYPE html>
<html>
  <head>
    <title>innerHTML 示例</title>
  </head>
  <body>
    <h1 id="title">这是一个标题</h1>
    <p id="content">这是段落内容</p>
    <script>
      // 获取 title 元素并设置其 innerHTML
      document.getElementById("title").innerHTML = "新的标题";

      // 获取 content 元素并添加一些 HTML 标签
      document.getElementById("content").innerHTML = "这是一个链接：<a href='https://www.baidu.com/'>百度</a>"
    </script>
  </body>
</html>
属性特点
修改元素内容

使用 innerHTML 属性可以修改元素的内容，可以设置为纯文本或者带有 HTML 标签的字符串。

获取元素内容

使用 innerHTML 属性可以获取元素的内容。

var content = document.getElementById("elementID").innerHTML;
潜在安全问题

因为 innerHTML 属性可以包含任意的 HTML 标签和脚本，因此在使用时需要注意潜在的安全问题。如果从用户处获取了 HTML 内容，需要对其进行过滤和转义，避免被恶意代码利用。

总结

innerHTML 是 HTML 中最常用的属性之一，可以用来设置或获取元素的内容。但是在使用时需要注意安全问题，避免被恶意代码利用。