La conversion HTML chaîne en éléments DOM?

Question

Est-il un moyen de convertir du HTML comme:

<div>
<a href="#"></a>
<span></span>
</div>

ou toute autre chaîne HTML dans l'élément du DOM? (Pour que je puisse utiliser appendChild()). Je sais que je peux faire .innerHTML et .innerText, mais ce n'est pas ce que je veux -- j'ai littéralement voulez être capable de convertir une dynamique de chaîne HTML dans un élément du DOM pour que je puisse passer dans une .appendChild().

Mise à jour: Il semble y avoir confusion. J'ai le code HTML contenu dans une chaîne de caractères, comme la valeur d'une variable en JavaScript. Il n'y a pas de code HTML contenu dans le document.

Answer 1

Vous pouvez utiliser un DOMParser, comme suit:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>"
  , parser = new DOMParser()
  , doc = parser.parseFromString(xmlString, "text/xml");
doc.firstChild // => <div id="foo">...
doc.firstChild.firstChild // => <a href="#">...

Answer 2

En général, vous créez un temporaire parent de l'élément sur lequel vous pouvez écrire l' innerHTML, puis d'en extraire le contenu:

var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;

Si l'élément dont l'extérieur HTML que vous avez est un simple <div> comme ici, c'est facile. Si il pourrait être quelque chose d'autre qui ne peuvent pas aller n'importe où, vous pouvez avoir plus de problèmes. Par exemple si il s'agissait d'un <li>, vous devez avoir le parent wrapper être un <ul>.

Mais IE ne peut pas écrire innerHTML sur des éléments comme l' <tr> donc si vous aviez un <td> , vous auriez à envelopper l'ensemble de la chaîne HTML en <table><tbody><tr>...</tr></tbody></table>, écrire que d' innerHTML et de dégager le réel <td> vous vouliez partir d'un couple de niveaux plus bas.

Answer 3

Pourquoi ne pas utiliser insertAdjacentHTML

par exemple:

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here

Answer 4

Découvrez John Resig du pur JavaScript HTML parser.

EDIT: si vous souhaitez que le navigateur analyser le code HTML pour vous, innerHTML est exactement ce que vous voulez. À partir de cela DONC, la question:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

Answer 5

Ok, j'ai compris la réponse moi-même, après que j'ai eu à réfléchir sur les réponses des autres. :P

var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);