使用本机javaScript追加html

我需要使用纯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]);

函数创建（htmlStr）{
var frag=document.createDocumentFragment（），
temp=document.createElement（'div'）；
temp.innerHTML=htmlStr；
while（临时第一个孩子）{
第二个子女（临时第一个子女）；
}
返回碎片；
}
var target=document.queryselectoral（“.container right”）；
var fragment=create(
“一些应该追加的文本…
”
);
document.body.insertBefore（fragment，document.body.childNodes[0]）；

这很有效，但我有两个问题：

如何确保html片段被附加到div中，并且类

容器是正确的

，而不仅仅是主体？将最后一行更改为

document.body.insertBefore（fragment，target）不起作用

如何在目标元素中的内容（在现有内容之后）插入html，如jQuery的append（）

非常感谢您的帮助

---

.

嗯，我知道这是可行的：

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

这应该给你你的元素。然后你要这样做：

elem.innerHTML = elem.innerHTML + myNewStuff;

这将把html附加到元素的innerHTML中。我很快就试过了，效果很好

试试这个：

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

var target=document.querySelector（“.container right”）；
target.innerHTML+='一些应该追加的文本…
'；

var target=document.querySelector（“.container right”）；
var p=document.createElement（'p'）；
p、 innerHTML=“一些应该追加的文本…”；
var div=document.createElement（'div'）；
儿童组（p）；
var fragment=document.createDocumentFragment（）；
子片段（div）；
target.appendChild（片段）；

---

您最好创建一个div（

var div=document.createElement（'div'）；

），设置它的html（

div.innerHTML=“Hello World！”；

），然后将它附加到正文（

document.body.appendChild（div）；

）

document.queryselectoral（）

返回一个，因此您需要

document.body.insertBefore（片段，目标[0]）

。直接修改现有元素的innerHTML属性时要小心。这可能会导致绑定到子对象的任何事件出现问题。耶同意，在直接操作DOM元素时，您应该始终小心。我个人更喜欢使用documentFragment，但只要您知道这是怎么做的。除非我有一个非常好的原因是，我不会对一个交互式元素这样做，只会对一个显示静态内容的元素这样做。@Timconolazio，谢谢，它可以工作。您能详细介绍一下documentFragment吗？documentFragment及其提供的API与将XML作为字符串进行操作的想法是一样的（这或多或少就是我们在这里所做的）与使用节点以面向对象的方式（或多或少）操纵可解析结构相比。如果您查找“document.createDocumentFragment”您将看到它的全部内容。在vanilla JS世界中，它是一种非常强大的创建、构造、更改和移动HTML元素的方法。这绝对是一种比在活动的、当前显示的DOM元素的innerHTML中乱搞更健壮的方法（如果我没记错的话，它的性能更高）。没问题，很乐意提供帮助。这比公认的答案性能好得多。如果您处理的是大型元素，浏览器将重新呈现整个内容，而不仅仅是您添加的元素。公认的答案确实指出/建议文档片段，几分钟后会出现此片段……这是问题所在s的解决方案是引用，当元素被追加时，p、div和fragment变量现在都是dom引用，因此，如果在追加后修改其中一个，dom也会被修改，这是我不希望看到的，如果我以友好方式生成多个项（重复项）然后将失败，因为将只有一个元素，而不是N个元素。@MáximaAlekz您的评论没有任何意义。首先，问题不是关于多个项目。其次，最好使用dom引用，因为您可以修改而不必再次查询该元素。最后，回答您，如果您有多个项目，请声明M添加多个变量或在附加后重用同一个变量（如果您不关心dom）。