Pregunta Cómo obtener el HTML para un elemento DOM en javascript


Imagina que tengo el siguiente HTML:

<div><span><b>This is in bold</b></span></div>

Quiero obtener el HTML para el div, incluido el div mismo. Element.innerHTML solo devuelve:

<span>...</span>

¿Algunas ideas? Gracias


73
2017-11-19 14:02


origen


Respuestas:


Ampliando la respuesta de jldupont, podría crear un elemento de ajuste sobre la marcha:

var target = document.getElementById('myElement');
var wrap = document.createElement('div');
wrap.appendChild(target.cloneNode(true));
alert(wrap.innerHTML);

Estoy clonando el elemento para evitar tener que quitar y volver a insertar el elemento en el documento real. Sin embargo, esto puede ser costoso si el elemento que desea imprimir tiene un árbol muy grande debajo.


72
2017-11-19 14:22



Utilizar outerHTML:

var el = document.getElementById( 'foo' );
alert( el.outerHTML );

66
2017-11-19 14:10



Primero, ponga el elemento que envuelve el div en cuestión, pon un id atributo en el elemento y luego usar getElementById en él: una vez que tienes la lement, simplemente haz 'e.innerHTML` para recuperar el HTML.

<div><span><b>This is in bold</b></span></div> 

=> <div id="wrap"><div><span><b>This is in bold</b></span></div></div>

y entonces:

var e=document.getElementById("wrap");
var content=e.innerHTML;

Nota ese outerHTML no es compatible con varios navegadores


8
2017-11-19 14:03



Si quieres una huella más ligera, pero una secuencia de comandos más larga, obtén los elementos innerHTML y solo crea y clona la vacío padre-

function getHTML(who,lines){
    if(!who || !who.tagName) return '';

    var txt, ax, str, el= document.createElement('div');
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    ax= txt.indexOf('>')+1;
    str= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);

    el= null;
    return lines? str.replace(/> *</g,'>\n<'): str;
    //easier to read if elements are separated
}

3
2017-11-19 15:12



como outerHTML es solo IE, use esta función:

function getOuterHtml(node) {
    var parent = node.parentNode;
    var element = document.createElement(parent.tagName);
    element.appendChild(node);
    var html = element.innerHTML;
    parent.appendChild(node);
    return html;
}

crea un elemento vacío falso del tipo padre y usa innerHTML en él y luego vuelve a colocar el elemento de nuevo en el dom normal


2
2017-11-19 14:13



Querrás algo como esto para que sea un navegador cruzado.

function OuterHTML(element) {
    var container = document.createElement("div");
    container.appendChild(element.cloneNode(true));

    return container.innerHTML;
}

2
2017-11-19 14:17



var x = $('#container').get(0).outerHTML;

2
2017-09-09 09:30



var el = document.getElementById('foo');
el.parentNode.innerHTML;

0
2017-11-19 14:08



define la función outerHTML basada en la compatibilidad con element.outerHTML:

var temp_container = document.createElement("div"); // empty div not added to DOM
if (temp_container.outerHTML){
    var outerHTML = function(el){return el.outerHTML||el.nodeValue} // e.g. textnodes do not have outerHTML
  } else { // when .outerHTML is not supported
    var outerHTML = function(el){
      var clone = el.cloneNode(true);
      temp_container.appendChild(clone);
      outerhtml = temp_container.innerHTML;
      temp_container.removeChild(clone);
      return outerhtml;
    };
  };

0
2018-06-29 08:38