使用内置DOM方法或原型从HTML字符串创建新的DOM元素

我有一个表示元素的HTML字符串：“<li>text</li>”。我想将它附加到DOM中的一个元素（在我的例子中是一个ul）。如何使用Prototype或DOM方法做到这一点？

（我知道我可以在jQuery中轻松做到这一点，但不幸的是，我们没有使用jQuery。）

当前回答

对于某些html片段，如<td>test</td>、div.innerHTML、DOMParser.parseFromString和range.createContextualFragment（没有正确的上下文），此处其他答案中提到的解决方案不会创建<td>元素。

jQuery.parseHTML（）正确处理它们（我将jQuery2的parseHTML函数提取为一个独立函数，可以在非jQuery代码库中使用）。

如果您只支持Edge 13+，那么只使用HTML5模板标记会更简单：

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content;
}

var documentFragment = parseHTML('<td>Test</td>');

2015-12-17 11:42:42

其他回答

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

2011-09-06 21:53:15

解决方案-适用于自IE 4.0以来的所有浏览器

var htmlString = `<body><header class="text-1">Hello World</header><div id="table"><!--TABLE HERE--></div></body>`;
var tableString = `<table class="table"><thead><tr><th>th cell</th></tr></thead><tbody><tr><td>td cell</td></tr></tbody></table>`;


var doc = document.implementation.createHTMLDocument();
    doc.open();
    doc.write(htmlString);
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);
    doc.close();

console.log(doc);

或者你可以使用DOMParser

var doc = (new DOMParser).parseFromString(htmlString, "text/html");
    doc.getElementById('table').insertAdjacentHTML('beforeend', tableString);

console.log(doc);

2022-08-11 10:43:06

这是我的代码，它有效：

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

2011-05-21 07:40:44

为什么不使用原生js？

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=r.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

2020-05-22 19:51:40

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

2016-02-08 10:59:21

使用内置DOM方法或原型从HTML字符串创建新的DOM元素

推荐文章

最新文章

标签