blocks|key|1423974|text|使用insertAdjacentHTML()。它适用于所有当前的浏览器，甚至与IE11。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1423975|​|1423976|var+mylist+=+document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend',+'<li>third</li>');|code-block|syntax|javascript|1423977|<ul+id="mylist">
+<li>first</li>
+<li>second</li>
</ul>|1423978|1423979|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|1638724|text|不需要任何调整，你得到了一个原生的API：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638725|const+toNodes+=+html+=>
++++new+DOMParser().parseFromString(html,+'text/html').body.childNodes[0]|code-block|syntax|javascript|1638726|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|1638641|text|对于其他答案中提到的某些html片段，如<td>test</td>、div.innerHTML、DOMParser.parseFromString和range.createContextualFragment+(没有正确的上下文)，不会创建<td>元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1638642|jQuery.parseHTML()正确地处理它们(我提取了可以在非jquery代码库中使用的jQuery+2's+parseHTML+function+into+an+independent+function+)。|1638643|如果您只支持边缘13%2B，则只使用HTML5模板标记会更简单：|1638644|function+parseHTML(html)+{
++++var+t+=+document.createElement('template');
++++t.innerHTML+=+html;
++++return+t.content;
}

var+documentFragment+=+parseHTML('<td>Test</td>');|code-block|syntax|javascript|1638645|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|1423572|text|这里有一个简单的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1423573|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|1423574|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|1638769|text|您可以使用以下命令从字符串创建有效的DOM节点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638770|document.createRange().createContextualFragment()|offset|length|style|CODE|1638771|下面的示例在获取来自字符串的标记的页面中添加一个button元素：|1638772|​|1638773|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|1638774|1638775|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|1638695|text|我正在使用这个方法(在IE9%2B中有效)，尽管它不能解析<td>或其他一些无效的body的直接子代：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1638696|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|1638697|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|1639145|text|为什么不使用原生js呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1639146|++++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|1639147|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|1638840|text|我添加了一个从string创建元素的Document原型：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1638841|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|1638842|用法：|1638843|document.createElementFromString("<h1>Hello+World!</h1>");|1638844|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|1638961|text|HTML5和ES6|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638962|<template>|offset|length|style|CODE|1638963|演示|1638964|​|1638965|"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|1638966|@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;
}|1638967|<!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>|1638968|1638969|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|1638492|text|迟到了，但只是一张便条；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638493|可以将一个琐碎的元素作为容器添加到目标元素中，并在使用后将其移除。|1638494|//在chrome+23.0，firefox+18.0，即7-8-9和opera+12.11上测试。|1638495|<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|1638496|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|1423439|text|这是我的代码，它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1423440|function+parseTableHtml(s)+{+//+s+is+string
++++var+div+=+document.createElement('table');
++++div.innerHTML+=+s;

++++var+tr+=+div.getElementsByTagName('tr');
++++//+...
}|code-block|syntax|javascript|1423441|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|1424175|text|从字符串渲染DOM的最快解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1424176|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|1424177|和here+u可以检查DOM操作React与原生JS的性能|offset|length|1424178|现在你可以简单地使用：|1424179|let+element+=+render(document.body,+`
<div+style="font-size:120%25;line-height:140%25">
++<p+class="bold">New+DOM</p>
</div>
`);|1424180|当然，在不久的将来，您将使用来自内存的引用，因为var+"element“是您在文档中新创建的DOM。|1424181|记住"innerHTML=“非常慢:/|1424182|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|1638589|text|最重要的是，我认为我应该分享这一点，而不是我想出的复杂而又简单的方法……也许有人会发现一些有用的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638590|/*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|1638591|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|1639213|text|您可以使用DOM解析器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1639214|const+parser+=+new+DOMParser();
const+htmlString+=+"<strong>Beware+of+the+leopard</strong>";
const+doc3+=+parser.parseFromString(htmlString,+"text/html");|code-block|syntax|javascript|1639215|Reference|offset|length|1639216|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|1424335|text|我自己搜索了很多次，发现了这个很好的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1424336|const+stringToHTML+=+(str)+=>+{
++++var+parser+=+new+DOMParser();
++++var+doc+=+parser.parseFromString(str,+'text/html');
++++return+doc.body;
};|code-block|syntax|javascript|1424337|我想要转换的字符串：|1424338|'<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>'|1424339|结果是：|1424340|<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>|1424341|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|1639296|text|最新JS示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1639297|<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|1639298|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|1424440|text|访问https://www.codegrepper.com/code-examples/javascript/convert%2Ba%2Bstring%2Bto%2Bhtml%2Belement%2Bin%2Bjs|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1424441|const+stringToHtml+=+function+(str)+{
++++var+parser+=+new+DOMParser();
++++var+doc+=+parser.parseFromString(str,+'text/html');
++++return+doc.body;
}|code-block|syntax|javascript|1424442|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>


blocks|key|1423703|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|1423704|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|1423871|text|您可以使用以下函数将文本"HTML“转换为元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1423872|​|1423873|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|1423874|1423875|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|1638928|text|以下是适用于我的工作代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638929|我想把'Text‘字符串转换成HTML元素|offset|length|1638930|var+diva+=+UWA.createElement('div');
diva.innerHTML+=+'<a+href="http://wwww.example.com">Text</a>';
var+aelement+=+diva.firstChild;|code-block|syntax|javascript|1638931|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|1424081|text|var+msg+=“测试”jQuery.parseHTML(msg)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1424082|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|1423493|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|1423494|使用jnerator|unstyled|offset|length|1423495|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|1638419|text|这也是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1638420|$('<li>').text('hello').appendTo('#mylist');|code-block|syntax|javascript|1638421|它给人的感觉更像是一种jquery方式，带有链式函数调用。|1638422|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>


<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

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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