La création d'un nouvel élément du DOM à partir d'une chaîne HTML à l'aide intégrée dans les méthodes du DOM ou Prototype

HTML 5 introduit la <template> élément qui peut être utilisé à cette fin (comme décrite dans la WhatWG spec et MDN docs).

Un <template> est un élément HTML qui est permis à tout autre type d'élément comme un enfant. Le template a un .content de la propriété que vous pouvez y accéder avec le JavaScript qui pointe vers un DocumentFragment avec le modèle de contenu. Cela signifie que vous pouvez convertir une chaîne HTML pour les éléments DOM, par la définition de la innerHTML d'un <template> élément, puis pénètre dans la template's .content propriété.

Exemples:

/**
 * @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>');

Noter que des approches similaires que utiliser un autre élément de conteneur comme une div n'avez pas assez de travail. HTML a des restrictions sur les types d'éléments peuvent exister à l'intérieur de laquelle d'autres types d'éléments; par exemple, vous ne pouvez pas mettre un td comme un enfant direct d'un div. Ce sont les causes de ces éléments à disparaître, si vous essayez de définir la innerHTML d'un div pour les contenir. Depuis <template>s n'ont pas de telles restrictions sur leur contenu, cette lacune ne s'applique pas lors de l'utilisation d'un modèle.

Cependant, template n'est pas pris en charge dans certains navigateurs plus anciens. À partir de janvier 2018, puis-je utiliser... estimations 90% des utilisateurs sont globalement à l'aide d'un navigateur qui prend en charge modèles. En particulier, aucune version d'Internet Explorer prend en charge les; Microsoft n'est pas de mettre en œuvre template un soutien jusqu'à la libération de Bord.

Si vous êtes assez chanceux pour être à l'écriture de code c'est uniquement destinée aux utilisateurs sur les navigateurs modernes, aller de l'avant et de les utiliser dès maintenant. Sinon, vous pourriez avoir à attendre un certain temps pour les utilisateurs de se rattraper.

Plus récent DOM implémentations ont plage.createContextualFragment, qui fait ce que vous voulez dans un cadre de manière indépendante.

Il est largement pris en charge. Pour être sûr que, vérifier sa compatibilité bas dans la même MDN lien, car il sera en train de changer. En Mai 2017, ce qu'il est:

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

Heres un moyen simple de le faire:

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

Avec Prototype, vous pouvez également le faire:

HTML:

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

JS:

$('mylist').insert('<li>text</li>');

Je suis en utilisant cette méthode, qui Fonctionne dans IE9+), bien qu'il ne sera pas analyser <td> ou certains autres non valide direct de l'enfant de corps:

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>

À améliorer en outre la durée de .toDOM() extrait que l'on peut trouver dans des endroits différents, nous pouvons maintenant en toute sécurité utilisation backticks (modèle de littéraux).

Afin que nous puissions avoir les guillemets simples et doubles dans le foo html déclaration.

Cela se comportent comme des heredocs pour ceux qui sont familiers avec le terme.

Cela peut être amélioré en outre, avec des variables, des complexes de template:

Modèle de littéraux sont encadrés par l'arrière-tique () (accent grave)
de caractère au lieu d'un lit double ou des guillemets simples. Modèle de littéraux peuvent
contenir des espaces réservés. Elles sont indiquées par le signe dollar et bouclés
accolades (${expression}). Les expressions dans les espaces réservés et la
texte d'entre eux sont passés à une fonction. La fonction par défaut juste
concatène les parties dans une seule chaîne. Si il y a une expression
précédant le modèle littérale (tag ici), ce qui est appelé un "marqué
modèle". Dans ce cas, l'expression de balise (généralement une fonction) obtient
appelée avec le traité de modèle littérale, que vous pouvez ensuite
manipuler avant de sortir. Pour échapper à un arrière-tique dans un modèle
littéral, mettre une barre oblique inverse \ avant de l'arrière-tique.

JS:

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

CSS:

img {cursor: crosshair}

Alors, pourquoi ne pas utiliser directement .innerHTML +=?
Ce faisant, l'ensemble de la DOM est recalculé par le navigateur, c'est beaucoup plus lent.

https://caniuse.com/template-literals

Voici mon code, et ça fonctionne:

function parseTableHtml(s) { //s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    //...
}

Pour le fun j'ai pensé que je devais partager ce plus compliqué, mais encore approche simple, je suis venu avec... Peut-être que quelqu'un va trouver quelque chose d'utile.

/*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')"
}));

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

var jtag = $j.li({ child:'text' }); //Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

Utilisation jnerator

Ce sera trop de travail:

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

Il se sent plus comme un jquery sorte avec l'enchaînement des appels de fonction.