使用本机javaScript附加html

Question

我需要使用纯javaScript将一些html附加到现有元素:

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 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>';