blocks|key|3489786|text|注意：大多数当前的浏览器都支持HTML+<template>元素，这为从字符串创建元素提供了一种更可靠的方法。参见Mark+Amery's+answer+below+for+details。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3489787|对于较旧浏览器的和node/jsdom：(在撰写本文时它还不支持<template>元素)，请使用以下方法。这与这些库从HTML中获取DOM元素所做的事情是一样的(使用with+some+extra+work+for+IE解决其innerHTML实现中的bug)：|3489788|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;+
}|code-block|syntax|javascript|3489789|请注意，与HTML模板不同，这不适用于某些在法律上不能成为<div>子级的元素，例如<td>s。|3489790|如果您已经在使用库，我建议您坚持使用库认可的方法从HTML字符串创建元素：|3489791|3489792|Prototype在其update()+method中内置了此功能。|unordered-list-item|3489793|jQuery在其jQuery(html)和jQuery.parseHTML方法中实现了它。|3489794|3489795|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/35385518/1709587|1|https://stackoverflow.com/questions/1848588/why-does-html-work-and-not-innerhtml-or-appendchild/1849100#1849100|2|http://prototypejs.org/doc/latest/dom/Element/update/|3|https://api.jquery.com/jQuery/#jQuery2|4|https://api.jquery.com/jQuery.parseHTML/^0|0|3|K|A|1L|11|0|0|8|B|W|A|36|9|2C|R|1|0|0|T|5|16|4|0|0|0|B|8|B|F|2|0|8|C|L|G|8|C|3|L|G|4|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|D]]|E|@$9|1J|A|1K|1|1L]]|F|$]]|$1|G|3|H|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|D]|$9|1R|A|1S|B|D]]|E|@$9|1T|A|1U|1|1V]]|F|$]]|$1|I|3|J|5|K|7|1W|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|1X|8|@$9|1Y|A|1Z|B|D]|$9|20|A|21|B|D]]|E|@]|F|$]]|$1|P|3|Q|5|6|7|22|8|@]|E|@]|F|$]]|$1|R|3|-4|5|6|7|23|8|@]|E|@]|F|$]]|$1|S|3|T|5|U|7|24|8|@$9|25|A|26|B|D]]|E|@$9|27|A|28|1|29]]|F|$]]|$1|V|3|W|5|U|7|2A|8|@$9|2B|A|2C|B|D]|$9|2D|A|2E|B|D]]|E|@$9|2F|A|2G|1|2H]|$9|2I|A|2J|1|2K]]|F|$]]|$1|X|3|-4|5|6|7|2L|8|@]|E|@]|F|$]]|$1|Y|3|-4|5|6|7|2M|8|@]|E|@]|F|$]]]|Z|$10|$5|11|12|13|F|$14|15]]|16|$5|11|12|13|F|$14|17]]|18|$5|11|12|13|F|$14|19]]|1A|$5|11|12|13|F|$14|1B]]|1C|$5|11|12|13|F|$14|1D]]]]

<p><strong>Note:</strong> most current browsers support HTML <code>&lt;template&gt;</code> elements, which provide a more reliable way of turning creating elements from strings. See <a href="https://stackoverflow.com/a/35385518/1709587">Mark Amery's answer below for details</a>.</p>

<p><strong>For older browsers, and node/jsdom</strong>: (which doesn't yet support <code>&lt;template&gt;</code> elements at the time of writing), use the following method. It's the same thing the libraries use to do to get DOM elements from an HTML string (<a href="https://stackoverflow.com/questions/1848588/why-does-html-work-and-not-innerhtml-or-appendchild/1849100#1849100">with some extra work for IE</a> to work around bugs with its implementation of <code>innerHTML</code>):</p>

<pre><code>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; 
}
</code></pre>

<p>Note that unlike HTML templates this <em>won't</em> work for some elements that cannot legally be children of a <code>&lt;div&gt;</code>, such as <code>&lt;td&gt;</code>s. </p>

<p>If you're already using a library, I would recommend you stick to the library-approved method of creating elements from HTML strings:</p>

<ul>
<li>Prototype has this feature built-into its <a href="http://prototypejs.org/doc/latest/dom/Element/update/" rel="noreferrer"><code>update()</code> method</a>. </li>
<li>jQuery has it implemented in its <a href="https://api.jquery.com/jQuery/#jQuery2" rel="noreferrer"><code>jQuery(html)</code></a> and <a href="https://api.jquery.com/jQuery.parseHTML/" rel="noreferrer"><code>jQuery.parseHTML</code></a> methods.</li>
</ul>


blocks|key|272975|text|下面是如何使用PrototypeJS+(正如12年前OP最初要求的那样)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|272976|HTML：|272977|<ul+id="mylist"></ul>|code-block|syntax|javascript|272978|JS：|272979|$('mylist').insert('<li>text</li>');|272980|请注意，这不是jQuery!|272981|entityMap|0|LINK|mutability|MUTABLE|url|http://prototypejs.org/^0|7|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>Here's how to do it with <a href="http://prototypejs.org/" rel="nofollow noreferrer">PrototypeJS</a> (as originally requested by the OP 12 years ago):</p>
<p>HTML:</p>
<pre><code>&lt;ul id=&quot;mylist&quot;&gt;&lt;/ul&gt;
</code></pre>
<p>JS:</p>
<pre><code>$('mylist').insert('&lt;li&gt;text&lt;/li&gt;');
</code></pre>
<p>Note that <strong>this is not jQuery!</strong></p>


blocks|key|4337549|text|这是我的代码，它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4337550|function+parseTableHtml(s)+{+//+s+is+string
++++var+div+=+document.createElement('table');
++++div.innerHTML+=+s;

++++var+tr+=+div.getElementsByTagName('tr');
++++//+...
}|code-block|syntax|javascript|4337551|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's my code, and it works:</p>

<pre><code>function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}
</code></pre>


blocks|key|4337574|text|较新的DOM实现具有range.createContextualFragment，它以一种独立于框架的方式实现您想要的功能。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4337575|它得到了广泛的支持。但要确定的是，在同一个MDN链接中检查它的兼容性，因为它将发生变化。截至2017年5月，情况如下：|BOLD|4337576|Feature+++++++++Chrome+++Edge+++Firefox(Gecko)++Internet+Explorer+++Opera+++Safari
Basic+support+++(Yes)++++(Yes)++(Yes)+++++++++++11++++++++++++++++++15.0++++9.1.2|code-block|syntax|javascript|4337577|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/range.createContextualFragment^0|A|U|A|U|0|0|H|H|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|14|8|@]|D|@]|E|$L|M]]|$1|N|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>Newer DOM implementations have <a href="https://developer.mozilla.org/en/DOM/range.createContextualFragment" rel="noreferrer"><code>range.createContextualFragment</code></a>, which does what you want in a framework-independent way.</p>

<p>It's widely supported. To be sure though, <strong>check its compatibility</strong> down in the same MDN link, as it will be changing. As of May 2017 this is it:</p>

<pre><code>Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2
</code></pre>


blocks|key|3489885|text|这也是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3489886|$('<li>').text('hello').appendTo('#mylist');|code-block|syntax|javascript|3489887|它给人的感觉更像是一种jquery方式，带有链式函数调用。|3489888|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This will work too:</p>

<pre><code>$('&lt;li&gt;').text('hello').appendTo('#mylist');
</code></pre>

<p>It feels more like a jquery way with the chained function calls.</p>


blocks|key|273057|text|var+jtag+=+$j.li({+child:'text'+});+//+Represents:+<li>text</li>
var+htmlContent+=+$('mylist').html();
$('mylist').html(htmlContent+%2B+jtag.html());|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|273058|使用jnerator|unstyled|offset|length|273059|entityMap|0|LINK|mutability|MUTABLE|url|http://jnerator.com/^0|0|2|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>var jtag = $j.li({ child:'text' }); // Represents: &lt;li&gt;text&lt;/li&gt;
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());
</code></pre>

<p>Use <a href="http://jnerator.com/" rel="nofollow">jnerator</a></p>


blocks|key|273092|text|迟到了，但只是一张便条；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273093|可以将一个琐碎的元素作为容器添加到目标元素中，并在使用后将其移除。|273094|//在chrome+23.0，firefox+18.0，即7-8-9和opera+12.11上测试。|273095|<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>+'%2B
++++++++++++++++++++'<a+href="#"+onclick="return+!!alert(this.innerHTML)">Text+of+<b>A+2</b>.</a>+'%2B
++++++++++++++++++++'<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>|code-block|syntax|javascript|273096|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Late but just as a note;</p>

<p>It's possible to add a trivial element to target element as a container and remove it after using.</p>

<p>// Tested on chrome 23.0, firefox 18.0, ie 7-8-9 and opera 12.11.</p>

<pre><code>&lt;div id="div"&gt;&lt;/div&gt;

&lt;script&gt;
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '&lt;a href="#" target="_self"&gt;Text of A 1.&lt;/a&gt; '+
                    '&lt;a href="#" onclick="return !!alert(this.innerHTML)"&gt;Text of &lt;b&gt;A 2&lt;/b&gt;.&lt;/a&gt; '+
                    '&lt;hr size="1" /&gt;'
    // 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)
}
&lt;/script&gt;
</code></pre>


blocks|key|4337696|text|这里有一个简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4337697|String.prototype.toDOM=function(){
++var+d=document
+++++,i
+++++,a=d.createElement("div")
+++++,b=d.createDocumentFragment();
++a.innerHTML=this;
++while(i=a.firstChild)b.appendChild(i);
++return+b;
};

var+foo="<img+src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);|code-block|syntax|javascript|4337698|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Heres a simple way to do it:</p>

<pre><code>String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="&lt;img src='//placekitten.com/100/100'&gt;foo&lt;i&gt;bar&lt;/i&gt;".toDOM();
document.body.appendChild(foo);
</code></pre>


blocks|key|3490041|text|最重要的是，我认为我应该分享这一点，而不是我想出的复杂而又简单的方法……也许有人会发现一些有用的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3490042|/*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;'%2B
++++++++++'width:100px;+height:100px;+border:2px+solid+red;'%2B
++++++++++'cursor:pointer;+background-color:HoneyDew',
++++innerHTML:'My+newly+created+div+element!',
++++value:'for+example+only',
++++onclick:"alert('yay')"
}));|code-block|syntax|javascript|3490043|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For the heck of it I thought I'd share this over complicated but yet simple approach I came up with... Maybe someone will find something useful.</p>

<pre><code>/*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')"
}));
</code></pre>


blocks|key|3490074|text|对于其他答案中提到的某些html片段，如<td>test</td>、div.innerHTML、DOMParser.parseFromString和range.createContextualFragment+(没有正确的上下文)，不会创建<td>元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3490075|jQuery.parseHTML()正确地处理它们(我提取了可以在非jquery代码库中使用的jQuery+2's+parseHTML+function+into+an+independent+function+)。|3490076|如果您只支持边缘13%2B，则只使用HTML5模板标记会更简单：|3490077|function+parseHTML(html)+{
++++var+t+=+document.createElement('template');
++++t.innerHTML+=+html;
++++return+t.content;
}

var+documentFragment+=+parseHTML('<td>Test</td>');|code-block|syntax|javascript|3490078|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/Munawwar/6e6362dbdf77c7865a99^0|K|D|3C|4|0|1B|1M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>For certain html fragments like <code>&lt;td&gt;test&lt;/td&gt;</code>, div.innerHTML, DOMParser.parseFromString and range.createContextualFragment (without the right context) solutions mentioned in other answers here, won't create the <code>&lt;td&gt;</code> element.</p>
<p>jQuery.parseHTML() handles them properly (I extracted <a href="https://gist.github.com/Munawwar/6e6362dbdf77c7865a99" rel="noreferrer">jQuery 2's parseHTML function into an independent function</a> that can be used in non-jquery codebases).</p>
<p>If you are only supporting Edge 13+, it is simpler to just use the HTML5 template tag:</p>
<pre><code>function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content;
}

var documentFragment = parseHTML('&lt;td&gt;Test&lt;/td&gt;');
</code></pre>


blocks|key|999069|text|function+domify+(str)+{
++var+el+=+document.createElement('div');
++el.innerHTML+=+str;

++var+frag+=+document.createDocumentFragment();
++return+frag.appendChild(el.removeChild(el.firstChild));
}

var+str+=+"<div+class='foo'>foo</div>";
domify(str);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|999070|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "&lt;div class='foo'&gt;foo&lt;/div&gt;";
domify(str);
</code></pre>


blocks|key|273225|text|HTML5引入了可用于此目的的<template>元素(如WhatWG+spec和MDN+docs中所述)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|273226|<template>元素用于声明可在脚本中使用的HTML片段。元素在DOM中表示为具有DocumentFragment类型的.content属性的HTMLTemplateElement，以提供对模板内容的访问。这意味着您可以通过设置<template>元素的innerHTML，然后访问template的.content属性，将HTML转换为DOM元素。|273227|示例：|273228|/**
+*+@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>');|code-block|syntax|javascript|273229|请注意，use+a+different+container+element+such+as+a+div的类似方法并不十分有效。对于允许哪些元素类型存在于哪些其他元素类型中，HTML有限制；例如，您不能将td作为div的直接子元素。如果您尝试将div的innerHTML设置为包含这些元素，这会导致这些元素消失。由于<template>对其内容没有这样的限制，因此在使用模板时不适用此缺点。|273230|但是，在一些旧的浏览器中不支持template。截至2021年4月，我可以使用...估计96%25+of+users+globally+are+using+a+browser+that+supports+templates。特别是，没有Internet+Explorer版本支持它们；微软直到Edge的发布才实现了对template的支持。|273231|如果您足够幸运地编写了仅针对现代浏览器上的用户的代码，那么现在就开始使用它们。否则，您可能需要等待一段时间才能让用户赶上。|273232|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/scripting.html#the-template-element|1|https://developer.mozilla.org/en/docs/Web/HTML/Element/template|2|https://developer.mozilla.org/en/docs/Web/API/DocumentFragment|3|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content|4|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement|5|https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML|6|https://stackoverflow.com/a/494348/1709587|7|http://caniuse.com/#feat=template^0|F|A|T|B|0|15|8|1|0|0|A|17|G|1Q|8|21|J|38|A|3L|9|3Z|8|48|8|17|G|2|1Q|8|3|21|J|4|3L|9|5|0|0|0|1C|3|2T|2|2X|3|3D|3|3H|9|4D|A|4|1B|6|0|F|8|2S|8|4C|8|18|1T|7|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]|$9|1M|A|1N|1|1O]]|E|$]]|$1|F|3|G|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]|$9|24|A|25|B|C]]|D|@$9|26|A|27|1|28]|$9|29|A|2A|1|2B]|$9|2C|A|2D|1|2E]|$9|2F|A|2G|1|2H]]|E|$]]|$1|H|3|I|5|6|7|2I|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|2J|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|2K|8|@$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]|$9|2T|A|2U|B|C]|$9|2V|A|2W|B|C]]|D|@$9|2X|A|2Y|1|2Z]]|E|$]]|$1|Q|3|R|5|6|7|30|8|@$9|31|A|32|B|C]|$9|33|A|34|B|C]|$9|35|A|36|B|C]]|D|@$9|37|A|38|1|39]]|E|$]]|$1|S|3|T|5|6|7|3A|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|3B|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]|16|$5|X|Y|Z|E|$10|17]]|18|$5|X|Y|Z|E|$10|19]]|1A|$5|X|Y|Z|E|$10|1B]]|1C|$5|X|Y|Z|E|$10|1D]]|1E|$5|X|Y|Z|E|$10|1F]]]]

<p>HTML 5 introduced the <code>&lt;template&gt;</code> element which can be used for this purpose (as now described in the <a href="https://html.spec.whatwg.org/multipage/scripting.html#the-template-element" rel="noreferrer">WhatWG spec</a> and <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/template" rel="noreferrer">MDN docs</a>).</p>
<p>A <code>&lt;template&gt;</code> element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement" rel="noreferrer"><code>HTMLTemplateElement</code></a> which has a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content" rel="noreferrer"><code>.content</code></a> property of <a href="https://developer.mozilla.org/en/docs/Web/API/DocumentFragment" rel="noreferrer"><code>DocumentFragment</code></a> type, to provide access to the template's contents. This means that you can convert an HTML string to DOM elements by setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML" rel="noreferrer"><code>innerHTML</code></a> of a <code>&lt;template&gt;</code> element, then reaching into the <code>template</code>'s <code>.content</code> property.</p>
<p>Examples:</p>
<pre><code>/**
 * @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('&lt;td&gt;foo&lt;/td&gt;'),
    div = htmlToElement('&lt;div&gt;&lt;span&gt;nested&lt;/span&gt; &lt;span&gt;stuff&lt;/span&gt;&lt;/div&gt;');

/**
 * @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('&lt;tr&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;bar&lt;/td&gt;&lt;/tr&gt;');
</code></pre>
<p>Note that similar approaches that <a href="https://stackoverflow.com/a/494348/1709587">use a different container element such as a <code>div</code></a> don't quite work. HTML has restrictions on what element types are allowed to exist inside which other element types; for instance, you can't put a <code>td</code> as a direct child of a <code>div</code>. This causes these elements to vanish if you try to set the <code>innerHTML</code> of a <code>div</code> to contain them. Since <code>&lt;template&gt;</code>s have no such restrictions on their content, this shortcoming doesn't apply when using a template.</p>
<p>However, <code>template</code> is not supported in some old browsers. As of April 2021, <em>Can I use...</em> estimates <a href="http://caniuse.com/#feat=template" rel="noreferrer">96% of users globally are using a browser that supports <code>template</code>s</a>. In particular, no version of Internet Explorer supports them; Microsoft did not implement <code>template</code> support until the release of Edge.</p>
<p>If you're lucky enough to be writing code that's only targeted at users on modern browsers, go ahead and use them right now. Otherwise, you may have to wait a while for users to catch up.</p>


blocks|key|3490163|text|我正在使用这个方法(在IE9%2B中有效)，尽管它不能解析<td>或其他一些无效的body的直接子代：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3490164|function+stringToEl(string)+{
++++var+parser+=+new+DOMParser(),
++++++++content+=+'text/html',
++++++++DOM+=+parser.parseFromString(string,+content);

++++//+return+element
++++return+DOM.body.childNodes[0];
}

stringToEl('<li>text</li>');+//OUTPUT:+<li>text</li>|code-block|syntax|javascript|3490165|entityMap^0|R|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>I am using this method (Works in IE9+), although it will not parse <code>&lt;td&gt;</code> or some other invalid direct childs of body:</p>

<pre><code>function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('&lt;li&gt;text&lt;/li&gt;'); //OUTPUT: &lt;li&gt;text&lt;/li&gt;
</code></pre>


blocks|key|3490194|text|不需要任何调整，你得到了一个原生的API：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3490195|const+toNodes+=+html+=>
++++new+DOMParser().parseFromString(html,+'text/html').body.childNodes[0]|code-block|syntax|javascript|3490196|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>No need for any tweak, you got a native API:</p>

<pre><code>const toNodes = html =&gt;
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
</code></pre>


blocks|key|1003782|text|您可以使用以下命令从字符串创建有效的DOM节点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003783|document.createRange().createContextualFragment()|offset|length|style|CODE|1003784|下面的示例在获取来自字符串的标记的页面中添加一个button元素：|1003785|​|1003786|let+html+=+'<button+type="button">Click+Me!</button>';
let+fragmentFromString+=+function+(strHTML)+{
++return+document.createRange().createContextualFragment(strHTML);
}
let+fragment+=+fragmentFromString(html);
document.body.appendChild(fragment);|code-block|syntax|javascript|1003787|1003788|entityMap^0|0|0|1D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Z|8|@]|9|@]|A|$O|P]]|$1|Q|3|K|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>You can create valid DOM nodes from a string using:</p>

<p><code>document.createRange().createContextualFragment()</code></p>

<p>The following example adds a button element in the page taking the markup from a string:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let html = '&lt;button type="button"&gt;Click Me!&lt;/button&gt;';
let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);</code></pre>
</div>
</div>
</p>


blocks|key|4337871|text|您可以使用以下函数将文本"HTML“转换为元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4337872|​|4337873|function+htmlToElement(html)
{
++var+element+=+document.createElement('div');
++element.innerHTML+=+html;
++return(element);
}
var+html="<li>text+and+html</li>";
var+e=htmlToElement(html);|code-block|syntax|javascript|4337874|4337875|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>You can use the following function to convert the text "HTML" to the element</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function htmlToElement(html)
{
  var element = document.createElement('div');
  element.innerHTML = html;
  return(element);
}
var html="&lt;li&gt;text and html&lt;/li&gt;";
var e=htmlToElement(html);</code></pre>
</div>
</div>
</p>


blocks|key|3490353|text|我添加了一个从string创建元素的Document原型：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3490354|Document.prototype.createElementFromString+=+function+(str)+{
+++const+element+=+new+DOMParser().parseFromString(str,+'text/html');
+++const+child+=+element.documentElement.querySelector('body').firstChild;
+++return+child;
};|code-block|syntax|javascript|3490355|用法：|3490356|document.createElementFromString("<h1>Hello+World!</h1>");|3490357|entityMap^0|I|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>I added a <code>Document</code> prototype that creates an element from string:</p>
<pre class="lang-js prettyprint-override"><code>Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str, 'text/html');
   const child = element.documentElement.querySelector('body').firstChild;
   return child;
};
</code></pre>
<p>Usage:</p>
<pre class="lang-js prettyprint-override"><code>document.createElementFromString(&quot;&lt;h1&gt;Hello World!&lt;/h1&gt;&quot;);
</code></pre>


blocks|key|4337944|text|使用insertAdjacentHTML()。它适用于所有当前的浏览器，甚至与IE11。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4337945|​|4337946|var+mylist+=+document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend',+'<li>third</li>');|code-block|syntax|javascript|4337947|<ul+id="mylist">
+<li>first</li>
+<li>second</li>
</ul>|4337948|4337949|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML^0|2|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML" rel="noreferrer">insertAdjacentHTML()</a>. It works with all current browsers, even with IE11.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '&lt;li&gt;third&lt;/li&gt;');</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="mylist"&gt;
 &lt;li&gt;first&lt;/li&gt;
 &lt;li&gt;second&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|999210|text|以下是适用于我的工作代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999211|我想把'Text‘字符串转换成HTML元素|offset|length|999212|var+diva+=+UWA.createElement('div');
diva.innerHTML+=+'<a+href="http://wwww.example.com">Text</a>';
var+aelement+=+diva.firstChild;|code-block|syntax|javascript|999213|entityMap|0|LINK|mutability|MUTABLE|url|http://www.example.com/^0|0|4|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here is working code for me</p>

<p>I wanted to convert '<a href="http://www.example.com" rel="nofollow noreferrer">Text</a>' string to HTML element</p>

<pre><code>var diva = UWA.createElement('div');
diva.innerHTML = '&lt;a href="http://wwww.example.com"&gt;Text&lt;/a&gt;';
var aelement = diva.firstChild;
</code></pre>


blocks|key|273472|text|HTML5和ES6|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273473|<template>|offset|length|style|CODE|273474|演示|273475|​|273476|"use+strict";

/**
+*
+*+@author+xgqfrms
+*+@license+MIT
+*+@copyright+xgqfrms
+*+@description+HTML5+Template
+*+@augments
+*+@example
+*
+*/

/*

<template>
++++<h2>Flower</h2>
++++<img+src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
++++<div+class="myClass">I+like:+</div>
</template>

*/

const+showContent+=+()+=>+{
++++//+let+temp+=+document.getElementsByTagName("template")[0],
++++let+temp+=+document.querySelector(`[data-tempalte="tempalte-img"]`),
++++++++clone+=+temp.content.cloneNode(true);
++++document.body.appendChild(clone);
};

const+templateGenerator+=+(datas+=+[],+debug+=+false)+=>+{
++++let+result+=+``;
++++//+let+temp+=+document.getElementsByTagName("template")[1],
++++let+temp+=+document.querySelector(`[data-tempalte="tempalte-links"]`),
++++++++item+=+temp.content.querySelector("div");
++++for+(let+i+=+0;+i+<+datas.length;+i%2B%2B)+{
++++++++let+a+=+document.importNode(item,+true);
++++++++a.textContent+%2B=+datas[i];
++++++++document.body.appendChild(a);
++++}
++++return+result;
};

const+arr+=+["Audi",+"BMW",+"Ford",+"Honda",+"Jaguar",+"Nissan"];

if+(document.createElement("template").content)+{
++++console.log("YES!+The+browser+supports+the+template+element");
++++templateGenerator(arr);
++++setTimeout(()+=>+{
++++++++showContent();
++++},+0);
}+else+{
++++console.error("No!+The+browser+does+not+support+the+template+element");
}|code-block|syntax|javascript|273477|@charset+"UTf-8";

/*+test.css+*/

:root+{
++++--cololr:+#000;
++++--default-cololr:+#fff;
++++--new-cololr:+#0f0;
}

[data-class="links"]+{
++++color:+white;
++++background-color:+DodgerBlue;
++++padding:+20px;
++++text-align:+center;
++++margin:+10px;
}|273478|<!DOCTYPE+html>
<html+lang="zh-Hans">

<head>
++++<meta+charset="UTF-8">
++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++<meta+http-equiv="X-UA-Compatible"+content="ie=edge">
++++<title>Template+Test</title>
++++
</head>

<body>
++++<section>
++++++++<h1>Template+Test</h1>
++++</section>
++++<template+data-tempalte="tempalte-img">
++++++++<h3>Flower+Image</h3>
++++++++<img+src="https://www.w3schools.com/tags/img_white_flower.jpg">
++++</template>
++++<template+data-tempalte="tempalte-links">
++++++++<h3>links</h3>
++++++++<div+data-class="links">I+like:+</div>
++++</template>
++++
</body>

</html>|273479|273480|entityMap^0|0|0|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|13|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|S|3|T|5|N|7|15|8|@]|9|@]|A|$O|P]]|$1|U|3|K|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<h1>HTML5 &amp; ES6</h1>

<p><code>&lt;template&gt;</code></p>

<p>Demo</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

&lt;template&gt;
    &lt;h2&gt;Flower&lt;/h2&gt;
    &lt;img src="https://www.w3schools.com/tags/img_white_flower.jpg"&gt;
&lt;/template&gt;


&lt;template&gt;
    &lt;div class="myClass"&gt;I like: &lt;/div&gt;
&lt;/template&gt;

*/

const showContent = () =&gt; {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) =&gt; {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i &lt; datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() =&gt; {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-Hans"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Template Test&lt;/title&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;section&gt;
        &lt;h1&gt;Template Test&lt;/h1&gt;
    &lt;/section&gt;
    &lt;template data-tempalte="tempalte-img"&gt;
        &lt;h3&gt;Flower Image&lt;/h3&gt;
        &lt;img src="https://www.w3schools.com/tags/img_white_flower.jpg"&gt;
    &lt;/template&gt;
    &lt;template data-tempalte="tempalte-links"&gt;
        &lt;h3&gt;links&lt;/h3&gt;
        &lt;div data-class="links"&gt;I like: &lt;/div&gt;
    &lt;/template&gt;
    &lt;!-- js --&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|273519|text|为了进一步增强我们可以在不同位置找到的有用的.toDOM()代码片段，我们现在可以安全地使用backticks+(template+literals)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|273520|所以我们可以在foo+html声明中使用单引号和双引号。|273521|对于那些熟悉这个术语的人来说，这就像heredocs一样。|273522|可以使用变量进一步增强这一点，以创建复杂的模板：|273523|273524|模板文字用反记号(`)+(重音)字符括起来，而不是双引号或单引号。模板文字可以包含占位符。它们由美元符号和大括号(${expression})表示。占位符中的表达式和占位符之间的文本被传递给一个函数。default函数只是将各个部分连接成一个字符串。如果在模板文字之前有一个表达式(这里是标签)，这被称为“带标签的模板”。在这种情况下，使用处理后的模板文字调用标记表达式(通常是函数)，然后可以在输出之前对其进行操作。要转义模板文字中的反标记，请在反标记之前添加反斜杠\。|blockquote|273525|273526|273527|​|273528|String.prototype.toDOM=function(){
++var+d=document,i
+++++,a=d.createElement("div")
+++++,b=d.createDocumentFragment()
++a.innerHTML+=+this
++while(i=a.firstChild)b.appendChild(i)
++return+b
}

//+Using+template+literals
var+a+=+10,+b+=+5
var+foo=`
<img+
++onclick="alert('The+future+starts+today!')"+++
++src='//placekitten.com/100/100'>
foo${a+%2B+b}
++<i>bar</i>
++++<hr>`.toDOM();
document.body.appendChild(foo);|code-block|syntax|javascript|273529|img+{cursor:+crosshair}|273530|273531|那么，为什么不直接使用.innerHTML+%2B=呢？这样做，整个DOM都会被浏览器重新计算，速度会慢得多。|CODE|273532|https://caniuse.com/template-literals|273533|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals|1|https://en.wikipedia.org/wiki/Here_document|2^0|1A|9|1L|H|0|0|0|I|8|1|0|0|0|0|0|0|0|0|0|0|B|D|0|0|11|2|0^^$0|@$1|2|3|4|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|J|3|K|5|6|7|1S|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1U|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1X|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1Y|8|@]|D|@]|E|$W|X]]|$1|Y|3|Z|5|V|7|1Z|8|@]|D|@]|E|$W|X]]|$1|10|3|S|5|6|7|20|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|21|8|@$9|22|A|23|B|13]]|D|@]|E|$]]|$1|14|3|15|5|6|7|24|8|@]|D|@$9|25|A|26|1|27]]|E|$]]|$1|16|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|17|$18|$5|19|1A|1B|E|$1C|1D]]|1E|$5|19|1A|1B|E|$1C|1F]]|1G|$5|19|1A|1B|E|$1C|15]]]]

<p>To enhance furthermore the useful <em>.toDOM()</em> snippet that we can find in different places, we can now <em>safely</em> use <strong>backticks</strong> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="nofollow noreferrer">template literals</a>).</p>
<p>So we can have single and double quotes in the <em>foo</em> html declaration.</p>
<p>This behave like <a href="https://en.wikipedia.org/wiki/Here_document" rel="nofollow noreferrer">heredocs</a> for those familiar with the term.</p>
<p>This can be enhanced furthermore with variables, to make complex templating:</p>
<blockquote>
<p>Template literals are enclosed by the back-tick (`) (grave accent)
character instead of double or single quotes. Template literals can
contain placeholders. These are indicated by the dollar sign and curly
braces (${expression}). The expressions in the placeholders and the
text between them get passed to a function. The default function just
concatenates the parts into a single string. If there is an expression
preceding the template literal (tag here), this is called a &quot;tagged
template&quot;. In that case, the tag expression (usually a function) gets
called with the processed template literal, which you can then
manipulate before outputting. To escape a back-tick in a template
literal, put a backslash \ before the back-tick.</p>
</blockquote>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>String.prototype.toDOM=function(){
  var d=document,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment()
  a.innerHTML = this
  while(i=a.firstChild)b.appendChild(i)
  return b
}

// Using template literals
var a = 10, b = 5
var foo=`
&lt;img 
  onclick="alert('The future starts today!')"   
  src='//placekitten.com/100/100'&gt;
foo${a + b}
  &lt;i&gt;bar&lt;/i&gt;
    &lt;hr&gt;`.toDOM();
document.body.appendChild(foo);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {cursor: crosshair}</code></pre>
</div>
</div>
</p>
<p>So, why not use directly <code>.innerHTML += </code>? By doing so, the whole DOM is being recalculated by the browser, it's much slower.</p>
<p><a href="https://caniuse.com/template-literals" rel="nofollow noreferrer">https://caniuse.com/template-literals</a></p>


blocks|key|1003917|text|var+msg+=“测试”jQuery.parseHTML(msg)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1003918|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>var msg = "test"
jQuery.parseHTML(msg)</p>


blocks|key|273591|text|从字符串渲染DOM的最快解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273592|let+render+=+(relEl,+tpl,+parse+=+true)+=>+{
++if+(!relEl)+return;
++const+range+=+document.createRange();
++range.selectNode(relEl);
++const+child+=+range.createContextualFragment(tpl);
++return+parse+?+relEl.appendChild(child)+:+{relEl,+el};
};|code-block|syntax|javascript|273593|和here+u可以检查DOM操作React与原生JS的性能|offset|length|273594|现在你可以简单地使用：|273595|let+element+=+render(document.body,+`
<div+style="font-size:120%25;line-height:140%25">
++<p+class="bold">New+DOM</p>
</div>
`);|273596|当然，在不久的将来，您将使用来自内存的引用，因为var+"element“是您在文档中新创建的DOM。|273597|记住"innerHTML=“非常慢:/|273598|entityMap|0|LINK|mutability|MUTABLE|url|https://jsperf.com/react-vs-raw-dom-manipulation^0|0|0|1|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Fastest solution to render DOM from string:</p>

<pre><code>let render = (relEl, tpl, parse = true) =&gt; {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};
</code></pre>

<p>And <a href="https://jsperf.com/react-vs-raw-dom-manipulation" rel="nofollow noreferrer">here</a> u can check performance for DOM manipulation React vs native JS</p>

<p>Now u can simply use:</p>

<pre><code>let element = render(document.body, `
&lt;div style="font-size:120%;line-height:140%"&gt;
  &lt;p class="bold"&gt;New DOM&lt;/p&gt;
&lt;/div&gt;
`);
</code></pre>

<p>And of course in near future u use references from memory cause var "element" is your new created DOM in your document.</p>

<p>And remember "innerHTML=" is very slow :/</p>


blocks|key|3490596|text|为什么不使用原生js呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3490597|++++var+s="<span+class='text-muted'+style='font-size:.75em;+position:absolute;+bottom:3px;+left:30px'>From+<strong>Dan's+Tools</strong></span>"
++++var+e=document.createElement('div')
++++var+r=document.createRange();
++++r.selectNodeContents(e)
++++var+f=r.createContextualFragment(s);
++++e.appendChild(f);
++++e+=+e.firstElementChild;|code-block|syntax|javascript|3490598|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why don't do with native js?</p>
<pre><code>    var s=&quot;&lt;span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'&gt;From &lt;strong&gt;Dan's Tools&lt;/strong&gt;&lt;/span&gt;&quot;
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=r.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;
</code></pre>


blocks|key|1003999|text|回答|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1004000|<+.trim()|offset|length|style|CODE|1004001|Create+children|unordered-list-item|1004002|
|1004003|Return+children，child，or+|1004004|
创建连接到您的children|1004005|Return+an+Array+of+Template'schildren，child，or的Template's+innerHTML|1004006|1004007|​|1004008|function+toElement(s='',c,t=document.createElement('template'),l='length'){
t.innerHTML=s.trim();c=[...t.content.childNodes];return+c[l]>1?c:c[0]%7C%7C'';}



console.log(toElement());
console.log(toElement(''));
console.log(toElement('++++'));
console.log(toElement('<td>With+td</td>'));
console.log(toElement('<tr><td>With+t</td></tr>'));
console.log(toElement('<tr><td>foo</td></tr><tr><td>bar</td></tr>'));
console.log(toElement('<div><span>nested</span>+<span>stuff</span></div>'));|code-block|syntax|javascript|1004009|1004010|entityMap^0|0|2|7|0|0|0|7|8|G|5|0|0|A|5|J|I|12|5|1B|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|J|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1F|8|@$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]|$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1P|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1Q|8|@]|9|@]|A|$Y|Z]]|$1|10|3|U|5|6|7|1R|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|12|$]]

<h1>Answer</h1>
<ul>
<li>Create a <code>Template</code></li>
<li>Set the <code>Template's</code> innerHTML to your <code>string</code> <code>.trim()</code></li>
<li>Create an <code>Array</code> of <code>Template's</code> children</li>
<li>Return <code>children</code>, <code>child</code>, or <code> </code></li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function toElement(s='',c,t=document.createElement('template'),l='length'){
t.innerHTML=s.trim();c=[...t.content.childNodes];return c[l]&gt;1?c:c[0]||'';}



console.log(toElement());
console.log(toElement(''));
console.log(toElement('    '));
console.log(toElement('&lt;td&gt;With td&lt;/td&gt;'));
console.log(toElement('&lt;tr&gt;&lt;td&gt;With t&lt;/td&gt;&lt;/tr&gt;'));
console.log(toElement('&lt;tr&gt;&lt;td&gt;foo&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;bar&lt;/td&gt;&lt;/tr&gt;'));
console.log(toElement('&lt;div&gt;&lt;span&gt;nested&lt;/span&gt; &lt;span&gt;stuff&lt;/span&gt;&lt;/div&gt;'));</code></pre>
</div>
</div>
</p>


blocks|key|1004019|text|您可以使用DOM解析器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1004020|const+parser+=+new+DOMParser();
const+htmlString+=+"<strong>Beware+of+the+leopard</strong>";
const+doc3+=+parser.parseFromString(htmlString,+"text/html");|code-block|syntax|javascript|1004021|Reference|offset|length|1004022|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/DOMParser^0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can use DOM parser:</p>
<pre><code>const parser = new DOMParser();
const htmlString = &quot;&lt;strong&gt;Beware of the leopard&lt;/strong&gt;&quot;;
const doc3 = parser.parseFromString(htmlString, &quot;text/html&quot;);
</code></pre>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser" rel="nofollow noreferrer">Reference</a></p>


blocks|key|273709|text|我自己搜索了很多次，发现了这个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273710|const+stringToHTML+=+(str)+=>+{
++++var+parser+=+new+DOMParser();
++++var+doc+=+parser.parseFromString(str,+'text/html');
++++return+doc.body;
};|code-block|syntax|javascript|273711|我想要转换的字符串：|273712|'<iframe+src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963"+width="640"+height="360"+frameborder="0"+allow="autoplay;+fullscreen;+picture-in-picture"+allowfullscreen+title="Total+Body+Balance"></iframe>'|273713|结果是：|273714|<body><iframe+src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963"+width="640"+height="360"+frameborder="0"+allow="autoplay;+fullscreen;+picture-in-picture"+allowfullscreen=""+title="Total+Body+Balance"></iframe></body>|273715|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I have searched a lot for this myself and came across this solution which is neat.</p>
<pre><code>const stringToHTML = (str) =&gt; {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};
</code></pre>
<p>String that I wanted to convert:</p>
<pre><code>'&lt;iframe src=&quot;https://player.vimeo.com/video/578680903?h=ea840f9223&amp;amp;app_id=122963&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen title=&quot;Total Body Balance&quot;&gt;&lt;/iframe&gt;'
</code></pre>
<p>The result:</p>
<pre><code>&lt;body&gt;&lt;iframe src=&quot;https://player.vimeo.com/video/578680903?h=ea840f9223&amp;amp;app_id=122963&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen=&quot;&quot; title=&quot;Total Body Balance&quot;&gt;&lt;/iframe&gt;&lt;/body&gt;
</code></pre>


blocks|key|4338239|text|最新JS示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4338240|<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>|code-block|syntax|javascript|4338241|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Example with latest JS:</p>
<pre><code>&lt;template id=&quot;woof-sd-feature-box&quot;&gt;
&lt;div class=&quot;woof-sd-feature-box&quot; data-key=&quot;__KEY__&quot; data-title=&quot;__TITLE__&quot; data-data=&quot;__OPTIONS__&quot;&gt;
    &lt;h4&gt;__TITLE__&lt;/h4&gt;
    &lt;div class=&quot;woof-sd-form-item-anchor&quot;&gt;
        &lt;img src=&quot;img/move.png&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/template&gt;

&lt;script&gt;
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, &quot;text/html&quot;);
        this.container.prepend(dom.querySelector('.woof-sd-feature-box'));
    }
&lt;/script&gt;
</code></pre>


blocks|key|273743|text|访问https://www.codegrepper.com/code-examples/javascript/convert%2Ba%2Bstring%2Bto%2Bhtml%2Belement%2Bin%2Bjs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|273744|const+stringToHtml+=+function+(str)+{
++++var+parser+=+new+DOMParser();
++++var+doc+=+parser.parseFromString(str,+'text/html');
++++return+doc.body;
}|code-block|syntax|javascript|273745|entityMap|0|LINK|mutability|MUTABLE|url|https://www.codegrepper.com/code-examples/javascript/convert%2Ba%2Bstring%2Bto%2Bhtml%2Belement%2Bin%2Bjs^0|2|2J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Visit <a href="https://www.codegrepper.com/code-examples/javascript/convert+a+string+to+html+element+in+js" rel="nofollow noreferrer">https://www.codegrepper.com/code-examples/javascript/convert+a+string+to+html+element+in+js</a></p>
<pre><code>const stringToHtml = function (str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
}
</code></pre>


<p>I have an HTML string representing an element: <code>'&lt;li&gt;text&lt;/li&gt;'</code>. I'd like to append it to an element in the DOM (a <code>ul</code> in my case). How can I do this with Prototype or with DOM methods?</p>

<p>(I know i could do this easily in jQuery, but unfortunately we're not using jQuery.)</p>


Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个表示元素的超文本标记语言字符串：'<li>text</li>'。我想把它附加到DOM中的一个元素(在我的例子中是一个ul )。我如何使用Prototype或DOM方法来实现这一点？(我知道在jQuery中可以很容易做到这一点，但不幸的是，我们没有使用jQuery。)

问使用内置DOM方法或原型从HTML字符串创建新的DOM元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用内置DOM方法或原型从HTML字符串创建新的DOM元素EN