使用本机 JavaScript 附加 html答案

【问题标题】：Appending html using native javaScript使用本机 JavaScript 附加 html
【发布时间】：2017-02-28 20:01:04
【问题描述】：

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

这有点工作，但我有两个问题：

如何确保将 html 片段附加到具有 container-right 类的 div 而不仅仅是正文？将最后一行更改为document.body.insertBefore(fragment, target); 不起作用。
如何在目标元素的内容之后插入 html - 在现有内容之后 - 如 jQuery 的 append()？

非常感谢任何帮助。

JsFiddle here.

【问题讨论】：

您最好创建一个 div (var div = document.createElement('div');)，设置它的 html (div.innerHTML = "<span>Hello World!</span>";)，然后将其附加到正文 (document.body.appendChild(div);)
document.querySelectorAll() 返回一个NodeList，所以你需要document.body.insertBefore(fragment, target[0]);。

标签： javascript

【解决方案1】：

好吧，我知道这是可行的：

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

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

elem.innerHTML = elem.innerHTML + myNewStuff;

这会将您的 html 附加到元素的 innerHTML。我很快尝试了它，它有效。

【讨论】：

小心直接修改现有元素的 innerHTML 属性。它可能会导致绑定到子对象的任何事件出现问题。
@TimConsolazio，谢谢，它有效。请您详细说明一下 documentFragment 吗？
documentFragment 和它提供的 API 与将 XML 操作为字符串（这或多或少是我们在这里所做的）与使用节点在面向对象的方式（或多或少）。如果您查找“document.createDocumentFragment”，您将了解它的全部内容。在 vanilla JS 世界中，它是一种非常强大的方式来创建、构建、更改和移动 HTML 元素。绝对是一种比处理当前显示的 DOM 元素的 innerHTML 更强大的方法（如果我没记错的话，性能更高）。
完全没有问题，很乐意提供帮助。
Ammm elem.innerHTML += myNewStuff; 似乎更具可读性和简单性。

【解决方案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

【讨论】：

这比公认的答案性能要好得多。如果您正在处理一个大元素，浏览器将重新渲染整个事物，而不仅仅是您要附加的元素。
接受的答案确实指出/建议文档片段，几分钟后是这个......
这个解决方案的问题是引用，当元素被追加时，p、div和片段变量现在是一个dom引用，所以，如果你在追加后修改其中一个，dom也会被修改，这是我没想到的，如果我动态地生成多个项目（重复项），那么将会失败，因为只有一个元素，而不是 N 个元素。
@MáximaAlekz 您的评论毫无意义。首先，问题不在于多个项目。其次，最好有 dom 引用，因为您可以修改而无需再次查询元素。最后，回答你，如果你有多个项目，声明多个变量或在附加后重用同一个变量（如果你不关心 dom）。

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

基于this 对类似问题的回答，我发现insertAdjacentHTML 非常适合此类问题。我没有在节点列表上测试过它，但是对于单个节点它可以完美地工作。

insertAdjacentHTML 具有出色的浏览器兼容性（回到 IE4），此外它还可以让您决定要在哪里插入 HTML（请参阅here）。

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

【讨论】：