用JS给html插入text的不常见方法

我们在前端开发的过程中一定会有向html插入数据的经历，常见的是在元素上用innerHTML或者appendChild方法，这儿给大家再推荐3个方法，欢迎指正。

第一种：Element.insertAdjacentHTML()

insertAdjacentHTML()将指定的文本解析为HTML或XML，并将生成的节点插入指定位置的DOM树中。它不会重新分析它正在使用的元素，因此它不会破坏该元素内的现有元素。这避免了序列化的额外步骤，使其比直接innerHTML操作快得多

语法

element.insertAdjacentHTML(position, text);

参数

position
添加的text的相对位置必须是以下字符串之一：

'beforebegin'：在element它之前。
'afterbegin'：就element在它的第一个孩子之前。
'beforeend'：element在最后一个孩子之后。
'afterend'：element本身之后。

text
text是要被解析为HTML或XML并插入到树中的字符串。

用<p>标签来展示:

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

注：该beforebegin和afterend仅当节点在DOM树，有一个父元素位置的工作。

实例

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

提醒

使用insertAdjacentHTML方法将HTML插入到页面时请小心不要使用尚未转义的用户输入。

建议：insertAdjacentHTML在插入纯文本时不要使用; 相反，请使用node.textContent属性或node.insertAdjacentText()方法。这不会将传递的内容解释为HTML，而是将其作为原始文本插入。

第二种：Element.insertAdjacentElement()

该insertAdjacentElement()方法将给定的元素节点插入到相对于其被调用的元素的给定位置。

语法

targetElement.insertAdjacentElement(position, element);

参数

positon
添加的element的相对位置必须是以下字符串之一：

'beforebegin'：在element它之前。
'afterbegin'：就element在它的第一个孩子之前。
'beforeend'：element在最后一个孩子之后。
'afterend'：element本身之后。

element
要插入树中的元素。

返回值

如果插入失败返回值为null。

其他问题

SyntaxError 该position规定是不认可的值。
TypeError 该element规定是不是一个有效的元素。

用<p>标签来展示:

<！ - beforebegin- >
 <p>
<！ - afterbegin- >
FOO
<！ - beforeend- >
 </p>
<！ - afterend- >

注意：仅当节点位于树中并且具有元素父级时，“ beforebegin和” afterend位置才起作用。

实例

beforeBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('beforebegin',tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener('click', function() {
  var tempDiv = document.createElement('div');
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement('afterend',tempDiv);
  }
  setListener(tempDiv);
});

第三种： Element.insertAdjacentText()

该insertAdjacentText()方法将给定的文本节点插入到相对于其被调用的元素的给定位置。

语法

element.insertAdjacentText(position, element);

参数

positon
添加的element的相对位置必须是以下字符串之一：

'beforebegin'：在element它之前。
'afterbegin'：就element在它的第一个孩子之前。
'beforeend'：element在最后一个孩子之后。
'afterend'：element本身之后。

element
要插入到树中的元素。

返回值

Void.

提醒

SyntaxError 该position规定是不认可的值。

用<p>标签来展示:

<！ - beforebegin- >
 <p>
<！ - afterbegin- > 
foo 
<！ - beforeend- >
 </p>
<！ - afterend- >

注意：仅当节点位于树中并且具有元素父级时，“ beforebegin和” afterend位置才起作用。

实例

beforeBtn.addEventListener('click', function() {
  para.insertAdjacentText('afterbegin',textInput.value);
});

afterBtn.addEventListener('click', function() {
  para.insertAdjacentText('beforeend',textInput.value);
});

Polyfill

你可以用insertAdjacentText()方法在ie5.5或者更高的版本上填充内容

if (!Element.prototype.insertAdjacentText)
  Element.prototype.insertAdjacentText = function(type, txt){
    this.insertAdjacentHTML(
      type,
      (txt+'') // convert to string
        .replace(/&/g, '&') // embed ampersand symbols
        .replace(/</g, '&lt;') // embed less-than symbols
    )
  }

内容出处

文章内容摘自MDN，链接：MDN（此网站可能需要翻墙才能打开）。

1. Element.insertAdjacentHTML()
2. Element.insertAdjacentElement()
3. Element.insertAdjacentText()