js DOM 的 innerText 和 innerHTML

innerText 和 innerHTML 是 JavaScript 中常用于操作 DOM 元素内容的属性。

1. innerText：innerText 是一个属性，用于获取或设置元素的纯文本内容。它会返回元素及其子元素的文本内容，但不包含任何 HTML 标签。

   <div id="myDiv">
     <p>Hello <span>world</span>!</p>
   </div>
   
   var div = document.getElementById("myDiv");
   console.log(div.innerText); // 输出 "Hello world!"
   

   上述示例中，innerText 返回了 <div> 元素的纯文本内容，即 “Hello world!”。

   注意，innerText 是一个可写属性，可以用来修改元素的文本内容。

2. innerHTML：innerHTML 是一个属性，用于获取或设置元素的 HTML 内容。它返回元素及其子元素的 HTML 标记字符串，包括 HTML 标签和文本内容。

   <div id="myDiv">
     <p>Hello <span>world</span>!</p>
   </div>
   
   var div = document.getElementById("myDiv");
   console.log(div.innerHTML);
   

   上述示例中，innerHTML 返回了 <div> 元素的 HTML 内容，即 <p>Hello <span>world</span>!</p>。

   与 innerText 类似，innerHTML 也是一个可写属性，可以用来修改元素的 HTML 内容。

需要注意的是，使用 innerHTML 或 innerText 时应当注意安全性，避免将不受信任的内容直接插入到 HTML 中，以防止潜在的安全风险（如跨站脚本攻击）。在插入动态内容时，最好使用其他方法，如 textContent 或创建 DOM 元素，并使用安全的方法进行内容的设置和替换。