我有一个表示元素的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>
其他回答
HTML5和ES6
<模板>
Demo
“使用严格”；/****@作者xgqfrms*@许可证MIT*@版权xgqfrms*@description HTML5模板*@扩增*@示例**//*<模板><h2>鲜花</h2><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><模板><div class=“myClass”>我喜欢：</div></template>*/常量showContent=（）=>{//let temp=document.getElementsByTagName（“template”）[0]，let temp=document.querySelector（`[data tempalte=“tempalte img”]`），clone=临时内容克隆节点（true）；document.body.appendChild（克隆）；};const templateGenerator=（datas=[]，debug=false）=>{让result=``；//let temp=document.getElementsByTagName（“template”）[1]，let temp=document.querySelector（`[data tempalte=“tempalte links”]`），item=temp.content.querySelector（“div”）；for（设i=0；i<data.length；i++）{let a=document.importNode（item，true）；a.textContent+=数据[i]；document.body.appendChild（a）；}返回结果；};const arr=[“奥迪”、“宝马”、“福特”、“本田”、“捷豹”、“日产”]；if（document.createElement（“template”）.content）{console.log（“是！浏览器支持模板元素”）；模板生成器（arr）；setTimeout（（）=>{showContent（）；}, 0);}其他{console.error（“否！浏览器不支持模板元素”）；}@字符集“UTf-8”；/*测试.css*/：根目录{--颜色：#000；--默认cololr:#fff；--新的cololr:#0f0；}[数据class=“links”]{颜色：白色；背景色：道奇蓝；填充：20px；文本对齐：居中；边距：10px；}<!DOCTYPE html><html lang=“zh-Hans”><head><meta charset=“UTF-8”><meta name=“viewport”content=“width=设备宽度，初始比例=1.0”><meta http equiv=“X-UA-Compatible”content=“ie=edge”><title>模板测试</title><!--[如果lt IE 9]><script src=“https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js“></script><![endif]--></head><body><章节><h1>模板测试</h1></section><template data tempalte=“tempalte img”><h3>花卉图像</h3><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><template data tempalte=“tempalte links”><h3>链接</h3>我喜欢：</div></template><!-- js--></body></html>
我从这篇文章中得到了链接。（是否将HTML字符串转换为DOM元素？）
对我来说，我想找到一种将字符串转换为HTML元素的方法。如果您也有此需求，可以尝试以下方法
constfrag=document.createRange（）.createContextualFragment(`<a href=“/link.js”>js</a><a>去</a>`) constaCollection=frag.querySelectorAll（“a”）for（let[key，a]of Object.entries（aCollection））{console.log（a.getAttribute（“href”），a.textContent）}
迟到了，但只是一个音符；
可以将一个简单的元素作为容器添加到目标元素中，并在使用后将其删除。
//测试铬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>
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());
使用jnerator
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没有实施模板支持。
如果你有幸编写了只针对现代浏览器用户的代码，那么现在就开始使用吧。否则，您可能需要等待一段时间才能让用户跟上。
