使用本機 javaScript 附加 html

Question

我需要 append 一些 html 到使用純 javaScript 的現有元素：

function create(htmlStr) {
  var frag = document.createDocumentFragment(),
    temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
    frag.appendChild(temp.firstChild);
  }
  return frag;
}

var target = document.querySelectorAll(".container-right");
var fragment = create(
  '<div class="freetext"><p>Some text that should be appended...</p></div>'
);
document.body.insertBefore(fragment, document.body.childNodes[0]);

這有點工作，但我有兩個問題：

1. 如何確保 html 片段被附加到 div 與 class container-right ，而不僅僅是身體？ 將最后一行更改為document.body.insertBefore(fragment, target); 不起作用。

2. 如何在目標元素中的內容之后插入 html - 在現有內容之后 - 如 jQuery 的 append()？

任何幫助深表感謝。

JsFiddle 在這里。

Answer 1

嗯，我知道這有效：

let elem = document.querySelector ( 'css-selector (id or class)' )

這應該給你你的元素。 然后你這樣做：

elem.innerHTML = elem.innerHTML + myNewStuff;

這會將你的html追加到元素的innerHTML中。 我快速嘗試了，它有效。

Answer 2

var target = document.querySelector(".container-right");

var p = document.createElement('p');
p.innerHTML = "Some text that should be appended...";

var div = document.createElement('div');
div.appendChild(p);

var fragment = document.createDocumentFragment();
fragment.appendChild(div);

target.appendChild(fragment);

的jsfiddle

Answer 3

基於對類似問題的回答，我發現insertAdjacentHTML非常適合此類問題。 我沒有在節點列表上測試過它，但是使用單個節點它可以完美地工作。

insertAdjacentHTML具有出色的瀏覽器兼容性（回到 IE4），此外，它還可以讓您決定要在哪里插入 HTML（請參見此處）。

var target = document.querySelector(".container-right");
var newContent = '<div class="freetext"><p>Some text that should be appended...</p></div>';
target.insertAdjacentHTML('beforeend', newContent);

Answer 4

試試這個：

var target = document.querySelector(".container-right");
target.innerHTML += '<div class="freetext"><p>Some text that should be appended...</p></div>';

Answer 5

喬治·坦佩斯塔，最佳答案。 使用此功能（插入AdjacentHTML），如果您正在操作輸入字段，則不會丟失數據。