web-dev-qa-db-fra.com

Conversion de chaîne HTML en éléments DOM?

Y a-t-il un moyen de convertir HTML comme:

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

ou toute autre chaîne HTML dans l'élément 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 - je veux littéralement être capable de convertir une chaîne HTML dynamique en un élément DOM afin de pouvoir la transmettre à un .appendChild ().

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

javascripthtmldom
173
Tower

Vous pouvez utiliser un DOMParser, comme ceci:

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

Vous créez généralement un élément parent temporaire dans lequel vous pouvez écrire le innerHTML, puis extrayez 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 vous avez le code HTML externe est un simple _<div>_ comme ici, c'est simple. Si cela peut être quelque chose d'autre qui ne peut pas aller n'importe où, vous pourriez avoir plus de problèmes. Par exemple, s'il s'agissait d'un _<li>_, le wrapper parent devrait être un _<ul>_.

Mais IE ne peut pas écrire innerHTML sur des éléments tels que _<tr>_ alors si vous avez un _<td>_, vous devrez envelopper la chaîne HTML entière dans _<table><tbody><tr>_..._</tr></tbody></table>_, écrivez cela dans innerHTML et extrayez le _<td>_ que vous vouliez à partir de plusieurs niveaux.

184
bobince

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
41
Ram

Découvrez John Resig analyseur HTML JavaScript pur .

EDIT: si vous voulez que le navigateur analyse le code HTML pour vous, innerHTML est exactement ce que vous voulez. De this SO question :

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

D'accord, j'ai réalisé la réponse moi-même, après avoir dû réfléchir aux 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);
4
Tower

Voici un petit code utile.

var uiHelper = function () {

var htmls = {};

var getHTML = function (url) {
                /// <summary>Returns HTML in a string format</summary>
                /// <param name="url" type="string">The url to the file with the HTML</param>

    if (!htmls[url])
    {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    htmls[url] = xmlhttp.responseText;
     };
     return htmls[url];
    };

        return {
            getHTML: getHTML
        };
}();

- Convertir la chaîne HTML en un élément DOM

String.prototype.toDomElement = function () {

        var wrapper = document.createElement('div');
        wrapper.innerHTML = this;
        var df= document.createDocumentFragment();
        return df.addChilds(wrapper.children);
};

- prototype assistant

HTMLElement.prototype.addChilds = function (newChilds) {
        /// <summary>Add an array of child elements</summary>
        /// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
        /// <returns type="this" />
        for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
        return this;
};

- Usage

 thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();
2
Filling The Stack is What I DO

Vous pouvez le faire comme ça:

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);
1
william malo

Donnez simplement un id à l’élément et traitez-le normalement, par exemple:

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

Maintenant tu peux faire comme:

var div = document.getElementById('dv');
div.appendChild(......);

Ou avec jQuery:

$('#dv').get(0).appendChild(........);
1
Sarfraz