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

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


当前回答

解决方案-适用于自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);

其他回答

使用insertAdjacentHTML()。它适用于所有当前浏览器,即使是IE11。

var mylist=文档.getElementById('mylist');mylist.insertAdjacentHTML('beforeend','<li>third</li>');<ul id=“mylist”><li>第一个</li><li>第二个</li></ul>

您可以使用以下函数将文本“HTML”转换为元素

函数htmlToElement(html){var element=document.createElement('div');element.innerHTML=html;返回(元素);}var html=“<li>text和html</li>”;var e=htmlToElement(html);

可以使用以下方法从字符串创建有效的DOM节点:

document.createRange().createContextualFragment()

以下示例在页面中添加一个按钮元素,从字符串中获取标记:

让html='<button type=“button”>单击我</按钮>';let fragmentFromString=函数(strHTML){return document.createRange().createContextualFragment(strHTML);}let fragment=fragmentFromString(html);document.body.appendChild(片段);

我添加了一个Document原型,它从字符串创建一个元素:

Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str, 'text/html');
   const child = element.documentElement.querySelector('body').firstChild;
   return child;
};

用法:

document.createElementFromString("<h1>Hello World!</h1>");

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