Insérer des éléments HTML avec JavaScript

Question

Au lieu de chercher fastidieusement des solutions de contournement pour chaque type d'attribut et d'événement lorsque vous utilisez 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]);
 

Answer 1

Au lieu de directement jouer avec innerHTML il peut être préférable de créer un fragment, puis insérer:

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 natif méthodes du DOM pour l'insertion comme insertBefore, appendChild etc.
2. Vous avez accès aux nœuds DOM, avant qu'ils ne soient insérés, vous pouvez accéder au fragment de la childNodes objet.
3. À l'aide de fragments de document est très rapide, plus rapide que de créer des éléments en dehors de la DOM et dans certaines situations, plus rapide que innerHTML.

---

Même si innerHTML est utilisé dans la fonction, ça se passe à l'extérieur de la DOM, donc il est beaucoup plus rapide que vous ne le pensez...

Answer 2

Tu veux ça

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

Answer 3

Dans la vieille école de JavaScript, vous pouvez faire ceci:

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

En réponse à votre commentaire:

[...] J'ai été intéressé lors de la déclaration de la source d'une nouvelle attributs de l'élément et les événements, de ne pas l' innerHTML d'un élément.

Vous avez besoin d'injecter de l'HTML dans les DOM, bien; c'est pourquoi, innerHTML est utilisé dans l'ancienne école exemple en JavaScript. L' innerHTML de la BODY élément est ajouté au début de la nouvelle HTML. Nous ne sommes pas vraiment toucher le code HTML existant à l'intérieur de l' BODY.

Je vais réécrire le précitées exemple 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'aide d'un framework JavaScript serait ce code beaucoup moins verbeux et d'améliorer la lisibilité. Par exemple, jQuery vous permet d'effectuer les opérations suivantes:

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

Answer 4

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

Answer 5

Si vous souhaitez insérer du code HTML dans la balise d'une 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;