web-dev-qa-db-fra.com

Insérer des éléments HTML avec JavaScript

Au lieu de chercher fastidieusement des solutions de contournement pour chaque type d'attribut et d'événement en utilisant la syntaxe suivante:

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

Existe-t-il un moyen de déclarer l’élément HTML entier en tant que chaîne? comme:

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

Au lieu de jouer directement avecinnerHTML, il serait peut-être préférable de créer un fragment, puis d'insérer ce qui suit:

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

Avantages:

  1. Vous pouvez utiliser des méthodes DOM natives pour l'insertion telles que insertBefore, appendChild, etc.
  2. Vous avez accès aux noeuds DOM réels avant leur insertion. vous pouvez accéder à l'objet childNodes du fragment.
  3. L'utilisation de fragments de document est très rapide. plus rapide que la création d'éléments en dehors du DOM et, dans certaines situations, plus rapidement que innerHTML.

Même siinnerHTMLest utilisé dans la fonction, tout se passe en dehors du DOM, donc c'est beaucoup plus rapide que vous ne le pensez ...

119
James

Tu veux ça

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

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

position est la position par rapport à l'élément que vous insérez à côté de:

'beforebegin' Avant l'élément lui-même

'afterbegin' Juste à l'intérieur de l'élément, avant son premier enfant

'beforeend' Juste à l'intérieur de l'élément, après son dernier enfant

'afterend' Après l'élément lui-même

23
steven iseki

Dans la vieille école JavaScript, vous pourriez faire ceci:

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

En réponse à votre commentaire:

[...] Je souhaitais déclarer la source des attributs et événements d'un nouvel élément, et non la innerHTML d'un élément.

Vous devez cependant injecter le nouveau code HTML dans le DOM; C'est pourquoi innerHTML est utilisé dans l'exemple JavaScript de la vieille école. La innerHTML de l'élément BODY est précédée du nouveau code HTML. Nous ne touchons pas vraiment le code HTML existant dans la variable BODY.

Je vais réécrire l'exemple ci-dessus pour clarifier ceci:

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'utilisation d'un framework JavaScript rendrait ce code beaucoup moins bavard et améliorerait la lisibilité. Par exemple, jQuery vous permet d'effectuer les opérations suivantes:

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

À ma connaissance, ce qui, pour être juste, est relativement nouveau et limité, le seul problème potentiel de cette technique est le fait que vous ne pouvez pas créer dynamiquement certains éléments de tableau.

J'utilise un formulaire pour créer des modèles en ajoutant des éléments "modèle" à une DIV masquée, puis en utilisant cloneNode (true) pour créer un clone et en l'ajoutant si nécessaire. Gardez à l'esprit que vous devez vous assurer de réaffecter les identifiants comme requis pour éviter les doublons.

1
Rpc

Si vous souhaitez insérer du code HTML dans une balise de page existante, utilisez Jnerator . Cet outil a été créé spécialement pour cet objectif.

Au lieu d'écrire le code suivant

    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;

Vous pouvez écrire une structure plus compréhensible

    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;
0
Berezh

Comme d’autres l’ont dit, la fonctionnalité pratique jQuery prepend peut être imitée:

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

Bien que certains disent qu'il vaut mieux ne pas "déconner" avec innerHTML, il est fiable dans de nombreux cas d'utilisation, si vous savez ceci:

Si un nœud <div>, <span> ou <noembed> a un nœud de texte enfant comprenant les caractères (&), (<) ou (>), innerHTML renvoie ces caractères sous la forme &amp, &lt et &gt respectivement. Utilisez Node.textContent pour obtenir une copie correcte du contenu de ces nœuds de texte.

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

Ou:

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

insertAdjacentHTML est probablement une bonne alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

0
taseenb