在前端开发中，我们经常需要操作DOM（文档对象模型）来动态地更新页面内容。在这个过程中，有时候会用到一些方法来插入新的HTML元素或文本。小编将介绍HTML中的innerText、insertAdjacentElement、insertAdjacentHTML和insertAdjacentText这几个方法，以及它们之间的区别和用法。
innerText
innerText是DOM元素的属性，用于获取或设置元素及其子元素的文本内容。它会忽略HTML标签，只返回纯文本内容。例如：
<p>This is <strong>inner text</strong>.</p>
</div>
console.log(exampleDiv.innerText); // 输出：This is inner text.
insertAdjacentElement
insertAdjacentElement是DOM元素的方法，用于在指定位置插入一个新的DOM元素。它接受两个参数：插入位置和要插入的元素。插入位置可以是'beforebegin'、'afterbegin'、'beforeend'或'afterend'，分别表示在元素前、元素内部的开头、元素内部的结尾、元素后插入。例如：
<p>This is a paragraph.</p>
</div>
const newElement = document.createElement('div');
newElement.textContent = 'This is a new div.';
const container = document.getElementById('container');
container.insertAdjacentElement('beforebegin', newElement);
insertAdjacentHTML
insertAdjacentHTML也是DOM元素的方法，与insertAdjacentElement类似，用于在指定位置插入HTML代码。它接受两个参数：插入位置和要插入的HTML字符串。插入位置同样可以是'beforebegin'、'afterbegin'、'beforeend'或'afterend'。例如：
<p>This is a paragraph.</p>
</div>
container.insertAdjacentHTML('afterend', '<div>This is a new div.</div>');
insertAdjacentText
insertAdjacentText也是DOM元素的方法，用于在指定位置插入文本内容。它接受两个参数：插入位置和要插入的文本字符串。插入位置同样可以是'beforebegin'、'afterbegin'、'beforeend'或'afterend'。例如：
<p>This is a paragraph.</p>
</div>
container.insertAdjacentText('afterend', 'This is some additional text.');
区别与用法总结
- innerText：用于获取或设置元素及其子元素的文本内容，返回纯文本内容，不包含HTML标签。
- insertAdjacentElement：用于在指定位置插入一个新的DOM元素，接受两个参数：插入位置和要插入的元素。
- insertAdjacentHTML：用于在指定位置插入HTML代码，接受两个参数：插入位置和要插入的HTML字符串。
- insertAdjacentText：用于在指定位置插入文本内容，接受两个参数：插入位置和要插入的文本字符串。
这些方法可以帮助我们动态地操作DOM，根据需要插入新的元素、HTML代码或文本内容，从而实现页面内容的动态更新和交互效果。在实际开发中，根据需求选择合适的方法进行操作，可以更加灵活地控制页面的结构和内容。
Comments | NOTHING