javascript - tablas - innerhtml

¿Convertir cadena HTML en elementos DOM?

Question

Esta pregunta ya tiene una respuesta aquí:

• Crear un nuevo elemento DOM a partir de una cadena HTML utilizando métodos DOM incorporados o respuestas de Prototype 19

¿Hay alguna forma de convertir HTML como:

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

o cualquier otra cadena HTML en el elemento DOM? (Para poder usar appendChild ()). Sé que puedo hacer .innerHTML y .innerText, pero eso no es lo que quiero, literalmente quiero ser capaz de convertir una cadena HTML dinámica en un elemento DOM para poder pasarlo en .appendChild ().

Actualización: Parece haber confusión. Tengo los contenidos HTML en una cadena, como un valor de una variable en JavaScript. No hay contenido HTML en el documento.

Answer 1

¿Por qué no utilizar insertAdjacentHTML

por ejemplo:

// <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 2

Aquí hay un pequeño código que es útil.

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

- Convierte la cadena HTML en un elemento DOM

String.prototype.toDomElement = function () {

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

--prototipo ayudante

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

--Uso

 thatHTML = uiHelper.getHTML(''/Scripts/elevation/ui/add/html/add.txt'').toDomElement();

Answer 3

Consulte el analizador HTML de JavaScript puro de John Resig.

EDITAR: si quieres que el navegador analice el HTML por ti, innerHTML es exactamente lo que quieres. De esta pregunta SO :

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

Answer 4

De acuerdo, me di cuenta de la respuesta, después de tener que pensar en las respuestas de otras personas. :PAG

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

Answer 5

Mientras navegaba, encontré algunas excelentes herramientas en línea para convertir HTML a DOM en javascript puro.

Yo prefiero this Simplemente cambie algunos nombres de variables y nombre de función según sus preferencias y su DOM estará listo. Que te diviertas....

Answer 6

Por lo general, crea un elemento primario temporal al que puede escribir el innerHTML , luego extrae los contenidos:

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

Si el elemento cuyo HTML externo tiene es un <div> simple como aquí, esto es fácil. Si puede ser otra cosa que no puede ir a ninguna parte, es posible que tenga más problemas. Por ejemplo, si fuera un <li> , tendrías que tener el wrapper padre como <ul> .

Pero IE no puede escribir innerHTML en elementos como <tr> así que si tuviera una <td> tendría que envolver toda la cadena HTML en <table><tbody><tr> ... </tr></tbody></table> , escríbalo en innerHTML y resuelve el <td> real que querías desde un par de niveles hacia abajo.

Answer 7

Puede usar un DOMParser , así:

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 8

Puedes hacerlo así:

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

Answer 9

Simplemente dé una id al elemento y procese normalmente, por ejemplo:

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

Ahora puedes hacer como:

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

O con jQuery:

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