我們在前端開闢的過程當中肯定會有向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()