Inserimento di elementi HTML con JavaScript

Invece di cercare noiosamente soluzioni alternative per ogni tipo di attributo ed evento quando si utilizza la seguente sintassi:

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

C'è un modo in cui posso semplicemente dichiarare l'intero elemento HTML come una stringa? piace:

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

Invece di scherzare direttamente con innerHTMLesso potrebbe essere meglio creare un frammento e quindi inserirlo:

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

Benefici:

1. Puoi utilizzare metodi DOM nativi per l'inserimento come insertBefore, appendChild ecc.
2. Hai accesso ai nodi DOM effettivi prima che vengano inseriti; puoi accedere all'oggetto childNodes del frammento.
3. L'utilizzo dei frammenti di documenti è molto veloce; più veloce della creazione di elementi al di fuori del DOM e in determinate situazioni più veloce di innerHTML.

Anche se innerHTMLviene utilizzato all'interno della funzione, accade tutto al di fuori del DOM, quindi è molto più veloce di quanto si pensi ...

Tu vuoi questo

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

Dai un'occhiata a insertAdjacentHTML

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>

posizione è la posizione relativa all'elemento che stai inserendo adiacente a:

'beforebegin' Prima dell'elemento stesso

'afterbegin' Appena dentro l'elemento, prima del suo primo figlio

'beforeend' Appena dentro l'elemento, dopo il suo ultimo figlio

'afterend' Dopo l'elemento stesso

Nella vecchia scuola JavaScript, potresti fare questo:

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

In risposta al tuo commento:

[...] Ero interessato a dichiarare la fonte degli attributi e degli eventi di un nuovo elemento, non la fonte innerHTMLdi un elemento.

Tuttavia, è necessario inserire il nuovo HTML nel DOM; ecco perché innerHTMLviene utilizzato nell'esempio JavaScript della vecchia scuola. Il innerHTMLdel BODYelemento viene anteposto con il nuovo HTML. Non stiamo realmente toccando l'HTML esistente all'interno del file BODY.

Riscriverò l'esempio di cui sopra per chiarire questo:

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'

L'uso di un framework JavaScript renderebbe questo codice molto meno dettagliato e migliorerebbe la leggibilità. Ad esempio, jQuery ti consente di fare quanto segue:

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

Per quanto ne so, che, ad essere onesti, è abbastanza nuovo e limitato, l'unico potenziale problema con questa tecnica è il fatto che ti viene impedito di creare dinamicamente alcuni elementi di tabella.

Uso un modulo per creare modelli aggiungendo elementi "modello" a un DIV nascosto e quindi utilizzando cloneNode (true) per creare un clone e aggiungerlo come richiesto. Tieni presente che devi assicurarti di riassegnare gli ID come richiesto per evitare la duplicazione.

Come altri hanno detto, la comoda funzionalità jQuery prepend può essere emulata:

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

Mentre alcuni dicono che è meglio non "confondere" con innerHTML , è affidabile in molti casi d'uso, se sai questo:

Se un <div>, <span>o <noembed>nodo ha un nodo figlio testo che include i caratteri ( &), ( <) o ( >), innerHTML restituisce questi personaggi come &amp, &lte &gt, rispettivamente. Utilizzare Node.textContentper ottenere una copia corretta del contenuto di questi nodi di testo.

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

O:

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

insertAdjacentHTMLè probabilmente una buona alternativa: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Se vuoi inserire codice HTML all'interno del tag di una pagina esistente usa Jnerator . Questo strumento è stato creato appositamente per questo obiettivo.

Invece di scrivere il codice successivo

    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;

Puoi scrivere una struttura più comprensibile

    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;