我有一个表示元素的HTML字符串：“<li>text</li>”。我想将它附加到DOM中的一个元素（在我的例子中是一个ul）。如何使用Prototype或DOM方法做到这一点？
（我知道我可以在jQuery中轻松做到这一点，但不幸的是，我们没有使用jQuery。）
当前回答
最新JS示例：
<template id="woof-sd-feature-box">
<div class="woof-sd-feature-box" data-key="__KEY__" data-title="__TITLE__" data-data="__OPTIONS__">
<h4>__TITLE__</h4>
<div class="woof-sd-form-item-anchor">
<img src="img/move.png" alt="">
</div>
</div>
</template>
<script>
create(example_object) {
let html = document.getElementById('woof-sd-feature-box').innerHTML;
html = html.replaceAll('__KEY__', example_object.dataset.key);
html = html.replaceAll('__TITLE__', example_object.dataset.title);
html = html.replaceAll('__OPTIONS__', example_object.dataset.data);
//convertion HTML to DOM element and prepending it into another element
const dom = (new DOMParser()).parseFromString(html, "text/html");
this.container.prepend(dom.querySelector('.woof-sd-feature-box'));
}
</script>
其他回答
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());
使用jnerator
我自己找了很多，找到了一个很好的解决方案。
const stringToHTML = (str) => {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
要转换的字符串：
'<iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Total Body Balance"></iframe>'
结果：
<body><iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="Total Body Balance"></iframe></body>
较新的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
注意：大多数当前浏览器都支持HTML＜template＞元素，这提供了一种更可靠的方法来从字符串中创建元素。有关详细信息，请参阅下面Mark Amery的回答。
对于较旧的浏览器和node/jsdom:（在编写时还不支持<template>元素），请使用以下方法。这与库用来从HTML字符串中获取DOM元素的方法相同（IE需要额外的工作来解决innerHTML实现中的错误）：
function createElementFromHTML(htmlString) {
var div = document.createElement('div');
div.innerHTML = htmlString.trim();
// Change this to div.childNodes to support multiple top-level nodes.
return div.firstChild;
}
注意，与HTML模板不同，这对于某些不能合法成为＜div＞的子元素的元素（如＜td＞s）不起作用。
如果您已经在使用一个库，我建议您坚持使用库批准的方法，从HTML字符串创建元素：
原型在其update（）方法中内置了此功能。jQuery在其jQuery（html）和jQuery.parseHTML方法中实现了它。
迟到了，但只是一个音符；
可以将一个简单的元素作为容器添加到目标元素中，并在使用后将其删除。
//测试铬23.0，萤火虫18.0，即7-8-9和歌剧12.11。
<div id="div"></div>
<script>
window.onload = function() {
var foo, targetElement = document.getElementById('div')
foo = document.createElement('foo')
foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
'<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
'<hr size="1" />'
// Append 'foo' element to target element
targetElement.appendChild(foo)
// Add event
foo.firstChild.onclick = function() { return !!alert(this.target) }
while (foo.firstChild) {
// Also removes child nodes from 'foo'
targetElement.insertBefore(foo.firstChild, foo)
}
// Remove 'foo' element from target element
targetElement.removeChild(foo)
}
</script>
