749 votes

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

Je suis en train de créer un élément de manière dynamique à l'aide d'une chaîne HTML. Voici un exemple simple à l'aide de prototype et DOM:

// HTML string
var s = '<li>text</li>';
// DOM
var el1 = document.createElement(s);
// prototype
var el2 = new Element(s);
$('mylist').appendChild(el1);
$('mylist').appendChild(el2);

Les deux approches insérer un vide listitem à la liste.

Je sais que l'utilisation du prototype de l'Élément de constructeur requiert un nom de balise et une option de paramètre attributs, mais j'ai pensé qu'il pourrait me laisser passer dans une chaîne HTML.

Cependant, MSDN états ", Vous pouvez également spécifier tous les attributs à l'intérieur de la méthode createElement à l'aide d'une chaîne HTML pour la méthode argument."... donc je ne sais pas quel est le problème.

Et oui, je sais que je pourrais le faire facilement en jquery, malheureusement nous ne sommes pas à l'aide de jquery. Suis-je surplombant quelque chose de vraiment simple ici?

948voto

Crescent Fresh Points 54070

Devrait être évident, mais le lien vers l'article MSDN est au sujet d'un IE only.

En général, le suivant de la croix-navigateur truc, c'est que toutes les bibliothèques pour obtenir des éléments du DOM à partir d'une chaîne html (avec un travail supplémentaire pour IE pour <td>s, <tr>s, <thead>s, <select>s et plus):

// HTML string
var s = '<li>text</li>';

var div = document.createElement('div');
div.innerHTML = s;
var elements = div.childNodes;

Ou var element = div.firstChild si vous savez que vous obtenez un seul nœud racine.

Je vous recommande de vous en tenir à la bibliothèque méthode approuvée de créer des éléments de chaînes HTML. Prototype dispose de cette fonctionnalité intégrée dans ses update() méthode.

32voto

kojiro Points 24374

Plus récente DOM implémentations ont range.createContextualFragment, ce qui fait ce que vous voulez dans un cadre indépendant. À première vue, il semble être bien pris en charge parmi les implémentations modernes de Firefox, Chrome et Safari, et vous pouvez utiliser le standard de mise en œuvre de l' createElement dans IE.

17voto

william malo Points 737

Voici une façon 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);

7voto

Boro Points 496

Avec Prototype, vous pouvez aussi faire:

HTML:

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

JS:

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

2voto

Wen Qi Points 47

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X