HTML 5 介绍了<template>要素,可用于此目的(见。

A <template> element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a HTMLTemplateElement which has a .content property of DocumentFragment type, to provide access to the template s contents. This means that you can convert an HTML string to DOM elements by setting the innerHTML of a <template> element, and then reaching into the template s .content property.

实例:

/**
 * @param {String} HTML representing a single element.
 * @param {Boolean} flag representing whether or not to trim input whitespace, defaults to true.
 * @return {Element | HTMLCollection | null}
 */
function fromHTML(html, trim = true) {
  // Process the HTML string.
  html = trim ? html.trim() : html;
  if (!html) return null;

  // Then set up a new template element.
  const template = document.createElement( template );
  template.innerHTML = html;
  const result = template.content.children;

  // Then return either an HTMLElement or HTMLCollection,
  // based on whether the input HTML had one or more roots.
  if (result.length === 1) return result[0];
  return result;
}

// Example 1: add a div to the page
const div = fromHTML( <div><span>nested</span> <span>stuff</span></div> );
document.body.append(div);

// Example 2: add a bunch of rows to an on-page table
const rows = fromHTML( <tr><td>foo</td></tr><tr><td>bar</td></tr> );
table.append(...rows);

// Example 3: add a single extra row to the same on-page table
const td = fromHTML( <td>baz</td> );
const row = document.createElement(`tr`);
row.append(td);
table.append(row);

table {
  background: #EEE;
  padding: 0.25em;
}
  
table td {
  border: 1px solid grey;
  padding: 0 0.5em;
}

<table id="table"></table>

注意div。 没有什么工作。 超文本对允许存在哪些要素类型有限制;例如,作为<条码>div的直接儿童,你可以不设<条码>。 如果你试图制定<条码>内超文本<>/条码>以包含这些内容的<条码>。 由于<代码><template>s 对其内容没有这种限制,因此这一缺陷在使用模板时不适用。

这种办法以前并不总是可能的,因为IE没有支持<template>,但微软在2022年6月的互联网浏览器家中完全杀死了浏览器,

使用insertAtant/2006/2()。 它与所有现有浏览器合作,甚至与IE11合作。

var mylist = document.getElementById( mylist );
mylist.insertAdjacentHTML( beforeend ,  <li>third</li> );

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

j Query.parseinski()处理得当(我摘录https://gist.github.com/Munawwar/6e6362dbdf77c7865a99” rel=“noreferer”)。 彩色2为独立功能,可在非频率代码库中使用。

如果你只支持“边缘”13+,那么简单使用“超”5模板标签:

function parseHTML(html) {
    var t = document.createElement( template );
    t.innerHTML = html;
    return t.content;
}

var documentFragment = parseHTML( <td>Test</td> );

Newer DOM implementations have range.createContextualFragment, which does what you want in a framework-independent way.

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

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

这里简单地这样做:

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);

You can create valid DOM nodes from a string using:

www.createRange().createContextualFragment()

The following example adds a button element in the page taking the markup from a string:

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);

我正在使用这一方法(IE9+的工作),尽管它不会把<条码>和设计;td>或其他一些身体残疾的直接儿童:

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>原型,该原型从插手中产生一个要素:

Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str,  text/html );
   const child = element.documentElement.querySelector( body ).firstChild;
   return child;
};

使用:

document.createElementFromString("<h1>Hello World!</h1>");

为什么不与本地人 j在一起?

    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;

Answer

• Create a Template
• Set the Template s innerHTML to your string .trim()
• Create an Array of Template s children
• Return children, child, or

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]||  ;}



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> ));

HTML5 & ES6

<template>

解散

"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++) {
        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(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

@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;
}

<!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>
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</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>
    <!-- js -->
</body>

</html>

http://prototypejs.org/“rel=“nofollow noreferer” (按照12年前的执行部分第1段)

传真:

<ul id="mylist"></ul>

JS:

$( mylist ).insert( <li>text</li> );

请注意:这并不是 j!

<>Solution——自英文第4版以来与所有浏览器合作

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);

Or you can use DOMParser

var doc = (new DOMParser).parseFromString(htmlString, "text/html");
    doc.getElementById( table ).insertAdjacentHTML( beforeend , tableString);

console.log(doc);

这部法律是我的法典,它致力于:

function parseTableHtml(s) { // s is string
    var div = document.createElement( table );
    div.innerHTML = s;

    var tr = div.getElementsByTagName( tr );
    // ...
}

Late but just as a note;

在使用集装箱后,有可能添加一个三维元素,以作为集装箱加以清除。

/ 试验: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>

• 尽快解决使管理局摆脱困境:

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};
};

And here。 u 能够检查DOM操纵React诉原住民共同财产公司的业绩

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

访问

const stringToHtml = function (str) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str,  text/html );
    return doc.body;
}

I ve associated with this article. ⁽

对我来说,我想找到一种办法,将扼杀变成一个超文本部分。 如果你也有此需要,你可以尝试如下:

const frag = document.createRange().createContextualFragment(
`<a href="/link.js">js</a> 
 <a>go</a>
`
) 
const aCollection = frag.querySelectorAll("a")
for (let [key, a] of Object.entries(aCollection)) {
  console.log(a.getAttribute("href"), a.textContent)
}

最新例子 JS:

<template id="woof-sd-feature-box">
<div class="woof-sd-feature-box" data-key="__KEY__" data-title="__TITLE__" data-data="__OPTIONS__">
    <h4>__TITLE__</h4>
    <div class="woof-sd-form-item-anchor">
        <img src="img/move.png" alt="">
    </div>
</div>

</template>

<script>
create(example_object) {
        let html = document.getElementById( woof-sd-feature-box ).innerHTML;
        html = html.replaceAll( __KEY__ , example_object.dataset.key);
        html = html.replaceAll( __TITLE__ , example_object.dataset.title);
        html = html.replaceAll( __OPTIONS__ , example_object.dataset.data);
        //convertion HTML to DOM element and prepending it into another element
        const dom = (new DOMParser()).parseFromString(html, "text/html");
        this.container.prepend(dom.querySelector( .woof-sd-feature-box ));
    }
</script>

您可以利用以下职能将“超文本”文本改为内容。

function htmlToElement(html)
{
  var element = document.createElement( div );
  element.innerHTML = html;
  return(element);
}
var html="<li>text and html</li>";
var e=htmlToElement(html);