HTML中innerText、insertAdjacentElement、insertAdjacentHTML和insertAdjacentText的区别是什么?

发布于 7 天前  51 次阅读


本文于 2024年6月12日 9:53 更新,注意查看最新内容

在前端开发中,我们经常需要操作DOM(文档对象模型)来动态地更新页面内容。在这个过程中,有时候会用到一些方法来插入新的HTML元素或文本。小编将介绍HTML中的innerText、insertAdjacentElement、insertAdjacentHTML和insertAdjacentText这几个方法,以及它们之间的区别和用法。

innerText

innerText是DOM元素的属性,用于获取或设置元素及其子元素的文本内容。它会忽略HTML标签,只返回纯文本内容。例如:

html

<div id="example">
<p>This is <strong>inner text</strong>.</p>
</div>
javascript

const exampleDiv = document.getElementById('example');
console.log(exampleDiv.innerText); // 输出:This is inner text.

insertAdjacentElement

insertAdjacentElement是DOM元素的方法,用于在指定位置插入一个新的DOM元素。它接受两个参数:插入位置和要插入的元素。插入位置可以是'beforebegin'、'afterbegin'、'beforeend'或'afterend',分别表示在元素前、元素内部的开头、元素内部的结尾、元素后插入。例如:

html

<div id="container">
<p>This is a paragraph.</p>
</div>
javascript

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'。例如:

html

<div id="container">
<p>This is a paragraph.</p>
</div>
javascript

const container = document.getElementById('container');
container.insertAdjacentHTML('afterend', '<div>This is a new div.</div>');

insertAdjacentText

insertAdjacentText也是DOM元素的方法,用于在指定位置插入文本内容。它接受两个参数:插入位置和要插入的文本字符串。插入位置同样可以是'beforebegin'、'afterbegin'、'beforeend'或'afterend'。例如:

html

<div id="container">
<p>This is a paragraph.</p>
</div>
javascript

const container = document.getElementById('container');
container.insertAdjacentText('afterend', 'This is some additional text.');

区别与用法总结

  1. innerText:用于获取或设置元素及其子元素的文本内容,返回纯文本内容,不包含HTML标签。
  2. insertAdjacentElement:用于在指定位置插入一个新的DOM元素,接受两个参数:插入位置和要插入的元素。
  3. insertAdjacentHTML:用于在指定位置插入HTML代码,接受两个参数:插入位置和要插入的HTML字符串。
  4. insertAdjacentText:用于在指定位置插入文本内容,接受两个参数:插入位置和要插入的文本字符串。

这些方法可以帮助我们动态地操作DOM,根据需要插入新的元素、HTML代码或文本内容,从而实现页面内容的动态更新和交互效果。在实际开发中,根据需求选择合适的方法进行操作,可以更加灵活地控制页面的结构和内容。


这短短的一生,我们最终都会失去。