Einfügen von HTML-Elementen mit JavaScript

Anstatt mühsam nach Problemumgehungen für jeden Attribut- und Ereignistyp zu suchen, wenn Sie die folgende Syntax verwenden:

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

Gibt es eine Möglichkeit, das gesamte HTML-Element als Zeichenfolge zu deklarieren? mögen:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

Anstatt direkt damit herumzuspielen, ist innerHTMLes möglicherweise besser, ein Fragment zu erstellen und dann Folgendes einzufügen:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

Leistungen:

1. Sie können native DOM-Methoden zum Einfügen verwenden, z. B. insertBefore, appendChild usw.
2. Sie haben Zugriff auf die tatsächlichen DOM-Knoten, bevor sie eingefügt werden. Sie können auf das childNodes-Objekt des Fragments zugreifen.
3. Die Verwendung von Dokumentfragmenten ist sehr schnell. schneller als das Erstellen von Elementen außerhalb des DOM und in bestimmten Situationen schneller als innerHTML.

Obwohl innerHTMLes innerhalb der Funktion verwendet wird, geschieht alles außerhalb des DOM, sodass es viel schneller ist als man denkt ...

Du willst das

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

Schauen Sie sich insertAdjacentHTML an

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

Position ist die Position relativ zu dem Element, das Sie neben einfügen:

'beforebegin' Vor dem Element selbst

'afterbegin' Nur innerhalb des Elements, vor seinem ersten Kind

'beforeend' Nur innerhalb des Elements, nach seinem letzten Kind

'afterend' Nach dem Element selbst

In JavaScript der alten Schule können Sie Folgendes tun:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

Als Antwort auf Ihren Kommentar:

[...] Ich war daran interessiert, die Quelle der Attribute und Ereignisse eines neuen Elements zu deklarieren, nicht die innerHTMLeines Elements.

Sie müssen den neuen HTML-Code jedoch in das DOM einfügen. Deshalb innerHTMLwird es im JavaScript-Beispiel der alten Schule verwendet. Das innerHTMLvon dem BODYElement wird mit dem neuen HTML vorangestellt. Wir berühren den vorhandenen HTML-Code in der nicht wirklichBODY .

Ich werde das oben genannte Beispiel umschreiben, um dies zu verdeutlichen:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

Die Verwendung eines JavaScript-Frameworks würde diesen Code weniger ausführlich machen und die Lesbarkeit verbessern. Mit jQuery können Sie beispielsweise Folgendes tun:

$('body').prepend('<p id="foo">Some HTML</p>');

Meines Wissens, das, um fair zu sein, ziemlich neu und begrenzt ist, ist das einzige potenzielle Problem bei dieser Technik die Tatsache, dass Sie daran gehindert werden, einige Tabellenelemente dynamisch zu erstellen.

Ich verwende ein Formular für Vorlagen, indem ich einem versteckten DIV "Vorlagen" -Elemente hinzufüge und dann mit cloneNode (true) einen Klon erstelle und ihn nach Bedarf anhänge. Beachten Sie, dass Sie sicherstellen müssen, dass Sie die IDs nach Bedarf neu zuweisen, um Doppelarbeit zu vermeiden.

Wie bereits erwähnt, kann die praktische Funktion zum Voranstellen von jQuery emuliert werden:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

Während einige sagen, es sei besser, sich nicht mit innerHTML " herumzuschlagen" , ist es in vielen Anwendungsfällen zuverlässig, wenn Sie dies wissen:

Wenn eine <div>, <span>oder <noembed>Knoten ein Kind Textknoten, die die Zeichen enthält ( &), ( <) oder ( >), kehrt diese Zeichen als innerHTML- &amp, &ltund &gtjeweils. Verwenden Sie Node.textContentdiese Option , um eine korrekte Kopie des Inhalts dieser Textknoten zu erhalten.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Oder:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTMList wahrscheinlich eine gute Alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Wenn Sie HTML-Code in das Tag einer vorhandenen Seite einfügen möchten, verwenden Sie Jnerator . Dieses Tool wurde speziell für dieses Ziel erstellt.

Anstatt den nächsten Code zu schreiben

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

Sie können eine verständlichere Struktur schreiben

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;