Erstellen eines neuen DOM-Elements aus einer HTML-Zeichenfolge mit integrierten DOM-Methoden oder Prototyp

621

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

Omer Bokhari
quelle
Entschuldigung, was versuchst du genau zu erreichen? HTML-Zeichenfolge -> dom-Element?
Crescent Fresh
36
Es ist bedauerlich, dass diese Lösungen so indirekt sind. Ich wünschte, das Normungskomitee würde etwas Ähnliches spezifizieren wie:var nodes = document.fromString("<b>Hello</b> <br>");
Sridhar Sarnobat
1
Ich hatte ein Problem mit dem oben genannten, weil ich Attribute hatte, die weitergegeben werden mussten, und ich keine Lust hatte, sie zu analysieren: "<table id = '5ccf9305-4b10-aec6-3c55-a6d218bfb107' class = 'data-table Zeilenrandanzeige 'cellspacing =' 0 'width =' 100% '> </ table> "Also habe ich einfach verwendet: $ (" <table id =' 5ccf9305-4b10-aec6-3c55-a6d218bfb107 'class =' ​​data -table Zeilenrandanzeige 'cellspacing =' 0 'width =' 100% '> </ table> ")
stevenlacerda

Antworten:

818

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:

Halbmond frisch
quelle
1
Wie man innerHTML mit jQuery auf das erstellte div setzt, ohne diese unsichere innerHTML-Zuweisung zu verwenden (div.innerHTML = "irgendein Wert")
Shivanshu Goyal
12
Der Funktionsname createElementFromHTML ist irreführend, da div.firstChilda zurückgegeben wird, Nodewas kein HTMLElementzB kann node.setAttribute. So erstellen Sie stattdessen eine ElementRückgabe div.firstElementChildvon der Funktion.
Semmel
Vielen Dank, das <div>Umschließen des HTML-Codes, mit dem ich hinzugefügt habe, hat .innerHTMLmich geärgert. Ich habe nie daran gedacht, es zu benutzen .firstChild.
Ivan
Ich versuche, ein SVG innerhalb des erstellten divund zu analysieren, und die Ausgabe erfolgt, [object SVGSVGElement]während das Konsolenprotokoll mir das richtige DOM-Element gibt. Was mache ich falsch?
ed1nh0
1
Ich würde firstElementChild anstelle von firstChild verwenden (siehe w3schools.com/jsref/prop_element_firstelementchild.asp ), da das firstChild , wenn vor oder am Ende der Vorlage Platz ist, leeren Textknoten zurückgeben würde
Chris Panayotoff
342

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.

Mark Amery
quelle
9
schöner, moderner Ansatz. Getestet auf Opera, vergessen wir IE
Adi Prasetyo
2
Dies ist ein effektiver Ansatz und sehr sauber; Dies bricht jedoch (zumindest in Chrome 50) die Behandlung von Skript-Tags. Mit anderen Worten, wenn Sie diese Methode verwenden, um ein Skript-Tag zu erstellen und es dann an das Dokument (Text oder Kopf) anzuhängen, wird das Tag nicht ausgewertet und verhindert daher, dass das Skript ausgeführt wird. (Dies kann
beabsichtigt sein,
1
SCHÖN! Sie können sogar nach Elementen fragen, indem Sie Folgendes tun: template.content.querySelector ("img");
Roger Gajraj
1
@Crescent Fresh: Fair genug, ich hatte den Eindruck, dass Sie Ihre Antwort weg haben wollten, da Sie sagten, es sei jetzt irrelevant, ich entschuldige mich. Ein guter Kompromiss wäre, Ihrer Antwort eine Erklärung hinzuzufügen, die die Leser auf diese verweist, wie dies jetzt auf Meta diskutiert wurde. Hoffen wir nur, dass der Editierkrieg von dort nicht wieder aufkommt.
BoltClock
2
Es gibt ein Problem damit. Wenn Sie dort ein Tag mit Leerzeichen (!) Am Anfang oder Ende haben, werden diese entfernt! html.trimVersteh mich nicht falsch, hier geht es nicht um die Leerzeichen , die durch inneres Parsen der innerHTML-Einstellung entfernt wurden. In meinem Fall werden wichtige Leerzeichen entfernt, die Teil eines textNode sind. :-(
E-Motiv
109

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>

Christian d'Heureuse
quelle
9
Erstens insertAdjacentHTMLfunktioniert mit allen Browsern seit IE 4.0.
Jonas Äppelgran
6
Zweitens ist es großartig! Ein großes Plus im Vergleich dazu innerHTML += ...ist, dass Verweise auf vorherige Elemente mit dieser Methode noch intakt sind.
Jonas Äppelgran
7
Drittens mögliche Werte für das erste Argument ist: beforebegin, afterbegin, beforeend, afterend. Siehe den MDN-Artikel.
Jonas Äppelgran
beste Antwort auf mich
Jordan
4
Schade, dass der eingefügte HTML-
Code
30

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
Kojiro
quelle
3
Beachten Sie, dass dies ähnliche Nachteile hat wie das Setzen innerHTMLeines Div. Bestimmte Elemente wie tds werden ignoriert und erscheinen nicht im resultierenden Fragment.
Mark Amery
"Es gibt Berichte, dass Desktop Safari Range.createContextualFragment () zu einem bestimmten Zeitpunkt unterstützt hat, aber es wird zumindest in Safari 9.0 und 9.1 nicht unterstützt." (MDN Link in der Antwort)
Akauppi
27

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

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
math2001
quelle
9
Dies hat den gleichen großen Nachteil wie die akzeptierte Antwort - es wird HTML wie entstellen <td>text</td>. Dies liegt daran, dass DOMParserversucht wird, ein vollständiges HTML-Dokument zu analysieren , und nicht alle Elemente als Stammelemente eines Dokuments gültig sind.
Mark Amery
4
-1, da dies ein Duplikat einer früheren Antwort ist , in der ausdrücklich auf den in meinem obigen Kommentar erwähnten Nachteil hingewiesen wurde.
Mark Amery
20

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>');
Munawwar
quelle
16

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);
William Malo
quelle
4
@ MarkAmery Der Unterschied besteht darin, dass er ein Fragment verwendet, um das Anhängen mehrerer Stammelemente an das DOM zu ermöglichen. Dies ist ein zusätzlicher Vorteil. Wenn nur William das erwähnen würde, wäre das seine Antwort ...
Koen.
10

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

GibboK
quelle
5
Auch wenn dies ein schafft DocumentFragmentObjekt, es immer noch - zu meiner großen Überraschung - leidet unter dem gleichen Mangel wie die akzeptierte Antwort: Wenn Sie das tun document.createRange().createContextualFragment('<td>bla</td>'), erhalten Sie ein Fragment , das nur den Text ‚bla‘ enthält ohne das <td>Element. Zumindest beobachte ich das in Chrome 63; Ich habe mich nicht mit der Spezifikation befasst, um herauszufinden, ob es das richtige Verhalten ist oder nicht.
Mark Amery
9

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

HTML:

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

JS:

$('mylist').insert('<li>text</li>');
Pablo Borowicz
quelle
Ist das jQuery? oder JS?
Jeya Suriya Muthumari
1
Dies verwendet jQuery nicht integrierte DOM-Methoden, wie oben erwähnt.
Juan Hurtado
1
@ JuanHurtado dies verwendet PrototypeJs als OP vor fast 11 Jahren angefordert;)
Pablo Borowicz
8

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>
usrbowe
quelle
5

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

NVRM
quelle
4

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;
};
Raza
quelle
Beachten Sie, dass dies - wie an anderer Stelle auf dieser Seite erwähnt - für tds nicht funktioniert .
Mark Amery
3

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>

xgqfrms-gildata
quelle
2

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>
K-Gun
quelle
2

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

Paweł Kołodziejczak
quelle
1

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');
    // ...
}
Wen Qi
quelle
1
Schlägt fehl, wenn das zu erstellende Element selbst eine Tabelle ist.
Mark Amery
0

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')"
}));
JxAxMxIxN
quelle
0

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;
Sam Saarian
quelle
-1
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);
Denim Demon
quelle
-2

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

Saeed saeeyd
quelle
-1; Dies ist die gleiche Technik wie in der akzeptierten Antwort vorgeschlagen und hat die gleichen Nachteile - insbesondere, wenn sie nicht für tds funktioniert .
Mark Amery
-3
var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

Verwenden Sie jnerator

Berezh
quelle
-3

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;
Sandeep Badawe
quelle
Was ist wwww?
Tim und Struppi81
-3

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

Nitish Kumar
quelle
Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte und sofortige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen.
Dwhitz
-7

Das wird auch funktionieren:

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

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

Jack
quelle
26
Fühlt es sich wie jQuery an, weil es jQuery ist?
Tim Ferrell
5
Diese letzte Zeile ist einfach lustig!
Kumarharsh