我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?
(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)
当前回答
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>
其他回答
解决方案-适用于自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);
我自己找了很多,找到了一个很好的解决方案。
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>
迟到了,但只是一个音符;
可以将一个简单的元素作为容器添加到目标元素中,并在使用后将其删除。
//测试铬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>
注意:大多数当前浏览器都支持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方法中实现了它。
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>