我有一个表示元素的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>
其他回答
以下是如何使用PrototypeJS（正如OP 12年前最初要求的那样）：
HTML格式：
<ul id="mylist"></ul>
JS:
$('mylist').insert('<li>text</li>');
注意，这不是jQuery！
这也会奏效：
$('<li>').text('hello').appendTo('#mylist');
它感觉更像是一种带有链式函数调用的jquery方式。
可以使用以下方法从字符串创建有效的DOM节点：
document.createRange（）.createContextualFragment（）
以下示例在页面中添加一个按钮元素，从字符串中获取标记：
让html='<button type=“button”>单击我</按钮>'；let fragmentFromString=函数（strHTML）{return document.createRange（）.createContextualFragment（strHTML）；}let fragment=fragmentFromString（html）；document.body.appendChild（片段）；
这是我的代码，它有效：
function parseTableHtml(s) { // s is string
var div = document.createElement('table');
div.innerHTML = s;
var tr = div.getElementsByTagName('tr');
// ...
}
较新的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
