这里有一个简单的方法：

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

我从这篇文章中得到了链接。（是否将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）}

无需任何调整，您获得了一个本地API：

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

从字符串渲染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=”非常慢：/

我正在使用这个方法（在IE9+中有效），虽然它不会解析＜td＞或其他一些无效的直接子体：

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

较新的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