我有一个表示元素的HTML字符串：“<li>text</li>”。我想将它附加到DOM中的一个元素（在我的例子中是一个ul）。如何使用Prototype或DOM方法做到这一点？
（我知道我可以在jQuery中轻松做到这一点，但不幸的是，我们没有使用jQuery。）
当前回答
可以使用以下方法从字符串创建有效的DOM节点：
document.createRange（）.createContextualFragment（）
以下示例在页面中添加一个按钮元素，从字符串中获取标记：
让html='<button type=“button”>单击我</按钮>'；let fragmentFromString=函数（strHTML）{return document.createRange（）.createContextualFragment（strHTML）；}let fragment=fragmentFromString（html）；document.body.appendChild（片段）；
其他回答
这也会奏效：
$('<li>').text('hello').appendTo('#mylist');
它感觉更像是一种带有链式函数调用的jquery方式。
实际上，我想我会分享我想出的这个过于复杂但又简单的方法。。。也许有人会发现有用的东西。
/*Creates a new element - By Jamin Szczesny*/
function _new(args){
ele = document.createElement(args.node);
delete args.node;
for(x in args){
if(typeof ele[x]==='string'){
ele[x] = args[x];
}else{
ele.setAttribute(x, args[x]);
}
}
return ele;
}
/*You would 'simply' use it like this*/
$('body')[0].appendChild(_new({
node:'div',
id:'my-div',
style:'position:absolute; left:100px; top:100px;'+
'width:100px; height:100px; border:2px solid red;'+
'cursor:pointer; background-color:HoneyDew',
innerHTML:'My newly created div element!',
value:'for example only',
onclick:"alert('yay')"
}));
这是我的工作代码
我想将“文本”字符串转换为HTML元素
var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;
HTML5引入了可用于此目的的＜template＞元素（如现在在WhatWG规范和MDN文档中所描述的）。
＜template＞元素用于声明可在脚本中使用的HTML片段。元素在DOM中表示为HTMLTemplateElement，该元素具有DocumentFragment类型的.content属性，以提供对模板内容的访问。这意味着您可以通过设置＜template＞元素的innerHTML，然后到达模板的.content属性，将HTML字符串转换为DOM元素。
示例：
/**
* @param {String} HTML representing a single element
* @return {Element}
*/
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
var td = htmlToElement('<td>foo</td>'),
div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');
/**
* @param {String} HTML representing any number of sibling elements
* @return {NodeList}
*/
function htmlToElements(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.childNodes;
}
var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');
注意，使用不同容器元素（如div）的类似方法不太奏效。HTML对允许哪些元素类型存在于哪些其他元素类型中有限制；例如，不能将td作为div的直接子级。如果试图将div的innerHTML设置为包含这些元素，这会导致这些元素消失。由于＜template＞对其内容没有这样的限制，因此在使用模板时不适用此缺点。
然而，一些旧浏览器不支持模板。截至2021 4月，我可以使用……吗。。。据估计，全球96%的用户正在使用支持模板的浏览器。特别是，没有版本的Internet Explorer支持它们；在Edge发布之前，Microsoft没有实施模板支持。
如果你有幸编写了只针对现代浏览器用户的代码，那么现在就开始使用吧。否则，您可能需要等待一段时间才能让用户跟上。
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());
使用jnerator
