我从这篇文章中得到了链接。（是否将HTML字符串转换为DOM元素？）

对我来说，我想找到一种将字符串转换为HTML元素的方法。如果您也有此需求，可以尝试以下方法

constfrag=document.createRange（）.createContextualFragment(`<a href=“/link.js”>js</a><a>去</a>`) constaCollection=frag.querySelectorAll（“a”）for（let[key，a]of Object.entries（aCollection））{console.log（a.getAttribute（“href”），a.textContent）}

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

答复

创建模板将模板的innerHTML设置为strim.trim（）创建模板的子级数组返回子项、子项或

函数toElement（s=“”，c，t=document.createElement（'template'），l='length'）{t.innerHTML=s.trim（）；c=[…t.content.childNodes]；返回c[l]>1？c： c[0]| |“”；｝console.log（toElement（））；console.log（toElement（“”））；console.log（toElement（“”））；console.log（toElement（'<td>With td</td>'））；console.log（toElement（'<tr><td>With t</td></tr>'））；console.log（toElement（'<tr><td>foo</td></tr><tr><td>bar</td></tr>'））；console.log（toElement（'<div><span><span>嵌套</span><span>填充</span></div>'））；

较新的DOM实现具有range.createContextualFragment，它以独立于框架的方式完成您所需的操作。

它得到了广泛的支持。不过，为了确保这一点，请在同一MDN链接中检查其兼容性，因为它会发生变化。截至2017年5月：

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

这也会奏效：

$('<li>').text('hello').appendTo('#mylist');

它感觉更像是一种带有链式函数调用的jquery方式。

从字符串渲染DOM的最快解决方案：

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

在这里，您可以检查DOM操作React与原生JS的性能

现在您可以简单地使用：

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

当然，在不久的将来，您将使用来自内存的引用，因为var“element”是您在文档中新创建的DOM。

记住“innerHTML=”非常慢：/