Ich habe eine HTML-Zeichenfolge, die ein Element darstellt : '<li>text</li>'. Ich möchte es an ein Element im DOM anhängen (a ulin meinem Fall). Wie kann ich das mit Prototype oder mit DOM-Methoden machen?

(Ich weiß, dass ich dies in jQuery problemlos tun kann, aber leider verwenden wir jQuery nicht.)

Hinweis: Die meisten aktuellen Browser unterstützen HTML- <template>Elemente, die eine zuverlässigere Möglichkeit bieten, das Erstellen von Elementen aus Zeichenfolgen zu ändern. Siehe Mark Amerys Antwort unten für Details .

Verwenden Sie für ältere Browser und node / jsdom : (das <template>zum Zeitpunkt des Schreibens noch keine Elemente unterstützt ) die folgende Methode. Es ist dasselbe, was die Bibliotheken verwenden, um DOM-Elemente aus einer HTML-Zeichenfolge abzurufen ( mit etwas zusätzlicher Arbeit für den IE , um Fehler bei der Implementierung von zu umgehen innerHTML):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

Beachten Sie, dass dies im Gegensatz zu HTML-Vorlagen für einige Elemente, die legal keine untergeordneten Elemente von a sein können , wie z. B. s, nicht funktioniert .<div><td>

Wenn Sie bereits eine Bibliothek verwenden, empfehlen wir Ihnen, sich an die von der Bibliothek genehmigte Methode zum Erstellen von Elementen aus HTML-Zeichenfolgen zu halten:

• Prototype hat diese Funktion in seine update()Methode integriert .
• jQuery hat es in seinen jQuery(html)und jQuery.parseHTMLMethoden implementiert .

In HTML 5 wurde das <template>Element eingeführt , das für diesen Zweck verwendet werden kann (wie jetzt in der WhatWG-Spezifikation und in den MDN-Dokumenten beschrieben) ).

Ein <template>Element wird verwendet, um HTML-Fragmente zu deklarieren, die in Skripten verwendet werden können. Das Element wird im DOM als ein Element HTMLTemplateElementmit einer .contentEigenschaft vom DocumentFragmentTyp dargestellt, um den Zugriff auf den Inhalt der Vorlage zu ermöglichen. Dies bedeutet, dass Sie eine HTML-Zeichenfolge in DOM-Elemente konvertieren können, indem Sie das innerHTMLeines <template>Elements festlegen und dann in das template's greifen.content Eigenschaft von .

Beispiele:

/**
 * @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>');

Beachten Sie, dass ähnliche Ansätze, die ein anderes Containerelement verwenden, z. B. adiv , nicht ganz funktionieren. In HTML gibt es Einschränkungen, welche Elementtypen in welchen anderen Elementtypen vorhanden sein dürfen. Zum Beispiel können Sie a nicht tdals direktes Kind von a setzen div. Dies führt dazu, dass diese Elemente verschwinden, wenn Sie versuchen, das innerHTMLvon a so einzustellen div, dass sie sie enthalten. Schon seit<template> s keine derartigen Einschränkungen für ihren Inhalt haben, gilt dieses Manko nicht, wenn eine Vorlage verwendet wird.

Wird templatejedoch in einigen alten Browsern nicht unterstützt. Ab Januar 2018 kann Can use ... Schätzungen zufolge verwenden 90% der Benutzer weltweit einen Browser, der templates unterstützt . Insbesondere unterstützt sie keine Version von Internet Explorer. Microsoft hat die templateUnterstützung erst mit der Veröffentlichung von Edge implementiert .

Wenn Sie das Glück haben, Code zu schreiben, der sich nur an Benutzer in modernen Browsern richtet, können Sie ihn jetzt verwenden. Andernfalls müssen Sie möglicherweise eine Weile warten, bis die Benutzer aufholen.

Verwenden Sie insertAdjacentHTML () . Es funktioniert mit allen aktuellen Browsern, auch mit IE11.

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

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

Neuere DOM-Implementierungen haben range.createContextualFragment das, was Sie wollen, auf rahmenunabhängige Weise.

Es wird weitgehend unterstützt. Um sicherzugehen, überprüfen Sie die Kompatibilität in derselben MDN-Verbindung, da sie sich ändern wird. Ab Mai 2017 ist es das:

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

Sie müssen keine Änderungen vornehmen, Sie haben eine native API:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

Für bestimmte HTML-Fragmente wie <td>test</td>div.innerHTML, DOMParser.parseFromString und range.createContextualFragment (ohne den richtigen Kontext), die in anderen Antworten hier erwähnt werden, wird das <td>Element nicht erstellt .

jQuery.parseHTML () behandelt sie ordnungsgemäß (ich habe die parseHTML-Funktion von jQuery 2 in eine unabhängige Funktion extrahiert , die in Nicht-jquery-Codebasen verwendet werden kann).

Wenn Sie nur Edge 13+ unterstützen, ist es einfacher, nur das HTML5-Vorlagen-Tag zu verwenden:

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

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

Hier ist eine einfache Möglichkeit, dies zu tun:

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

Sie können gültige DOM-Knoten aus einer Zeichenfolge erstellen, indem Sie:

document.createRange().createContextualFragment()

Im folgenden Beispiel wird der Seite ein Schaltflächenelement hinzugefügt, das das Markup aus einer Zeichenfolge übernimmt:

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

Mit Prototype können Sie außerdem Folgendes tun:

HTML:

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

JS:

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

Ich verwende diese Methode (funktioniert in IE9 +), obwohl sie nicht analysiert <td>oder andere ungültige direkte Kinder des Körpers:

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>

Zur Verbesserung der weiterhin den nützlichen .toDOM () Code - Schnipsel , dass wir an verschiedenen Orten finden, können wir jetzt sicher verwenden Backticks ( Vorlage Literale ).

So können wir einfache und doppelte Anführungszeichen im foo haben HTML-Deklaration haben.

Dies verhält sich wie Heredocs für diejenigen, die mit dem Begriff vertraut sind.

Dies kann außerdem mit Variablen erweitert werden, um komplexe Vorlagen zu erstellen:

Vorlagenliterale werden anstelle von doppelten oder einfachen Anführungszeichen durch das Back-Tick- Zeichen ( ) (schwerwiegender Akzent) eingeschlossen. Vorlagenliterale können Platzhalter enthalten. Diese werden durch das Dollarzeichen und geschweifte Klammern ($ {Ausdruck}) angezeigt. Die Ausdrücke in den Platzhaltern und der Text zwischen ihnen werden an eine Funktion übergeben. Die Standardfunktion verkettet nur die Teile zu einer einzigen Zeichenfolge. Wenn vor dem Vorlagenliteral ein Ausdruck steht (hier taggen), wird dies als "markierte Vorlage" bezeichnet. In diesem Fall wird der Tag-Ausdruck (normalerweise eine Funktion) mit dem verarbeiteten Vorlagenliteral aufgerufen, das Sie dann vor der Ausgabe bearbeiten können. Um einem Back-Tick in einem Vorlagenliteral zu entgehen, setzen Sie einen Backslash \ vor das Back-Tick.

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 litterals
var a = 10, b = 5
var foo=`
<img 
  onclick="alert('The future start today!')"   
  src='//placekitten.com/100/100'>
foo${a + b}
  <i>bar</i>
    <hr>`.toDOM();
document.body.appendChild(foo);

img {cursor: crosshair}

Warum also nicht direkt verwenden? .innerHTML += ? Auf diese Weise wird das gesamte DOM vom Browser neu berechnet, es ist viel langsamer.

https://caniuse.com/template-literals

Ich habe einen DocumentPrototyp hinzugefügt , der ein Element aus einer Zeichenfolge erstellt:

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

HTML5 & ES6

<template>

Demo

"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>

Spät aber nur als Notiz;

Es ist möglich, dem Zielelement ein triviales Element als Container hinzuzufügen und es nach der Verwendung zu entfernen.

// Getestet auf Chrom 23.0, Firefox 18.0, dh 7-8-9 und Oper 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>

Schnellste Lösung zum Rendern von DOM aus Zeichenfolgen:

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

Und hier können Sie die Leistung für DOM-Manipulation React vs native JS überprüfen

Jetzt können Sie einfach verwenden:

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

Und natürlich verwenden Sie in naher Zukunft Referenzen aus dem Speicher, da var "element" Ihr neu erstelltes DOM in Ihrem Dokument ist.

Und denken Sie daran, dass "innerHTML =" sehr langsam ist: /

Hier ist mein Code und es funktioniert:

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

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

Zum Teufel dachte ich, ich würde dies über einen komplizierten, aber dennoch einfachen Ansatz teilen, den ich mir ausgedacht habe ... Vielleicht findet jemand etwas Nützliches.

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

Warum nicht mit nativen js machen?

    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=range.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

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

Mit der folgenden Funktion können Sie den Text "HTML" in das Element konvertieren

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

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

Verwenden Sie jnerator

Hier ist Arbeitscode für mich

Ich wollte die Zeichenfolge ' Text ' in ein HTML-Element konvertieren

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

var msg = "test" jQuery.parseHTML (msg)

Das wird auch funktionieren:

$('<li>').text('hello').appendTo('#mylist');

Mit den verketteten Funktionsaufrufen fühlt es sich eher wie eine Abfrage an.