¿Por qué obtener un archivo HTML externo no funciona?

Question

I tratar de conseguir el código HTML exterior de dos maneras diferentes, en base a este cuestionar . Por desgracia, ninguno de ellos está dando el resultado esperado:

HTML:

<div id='my_div'>Hello</div>

JS:

$(function() {
    document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
    document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
});

La salida es:

[
Hello
]
[
Hello
]

espero que el siguiente resultado: <div id='my_div'>Hello</div>

ejemplo vivo aquí

¿Qué estoy haciendo mal?

Answer 1

En primer lugar, el primer ejemplo funciona bien . Echar un vistazo a su salida en Firebug . Tenga en cuenta, que desde su salida es HTML es representa como HTML . Nota que hay saltos de línea antes y después del HELLO ............... porque los HELLOs son DIVs dentro!

Tome un vistazo:

---

En segundo lugar w / jQuery, se podría también utilizar el método en mi respuesta a la pregunta se ha vinculado a

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

jsFiddle ejemplo

Esto añade un clon del elemento en cuestión a un objeto DIV jQuery y obtiene el HTML interna del objeto DIV jQuery .... que es el outerHTML del elemento en cuestión.

La forma general de la outerHTML de un elemento es:

$('<div>').append( $(ElementSelector).clone() ).html();

donde ElementSelector es el selector de jQuery del elemento cuyo outerHTML desea.

---

Nota: Lo anterior no añade nuevos elementos al DOM. $('<div>')...... Nunca se añade a la DOM. Sigue siendo meramente jQuery objeto independiente del DOM.

Answer 2

Esta es una función que se utiliza en el lib pure.js para obtener el outerHTML:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

Y para usarlo de la manera DOM:

var html = outerHTML(document.getElementById('my_div'));

Answer 3

Actualizar DEMO

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });

• htmlspecialchars función

Answer 4

intente lo siguiente:

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);

Answer 5

Se puede utilizar get de sacar elemento DOM nativa y luego usar el outerHTML como:

var html = $('#my_div').get(0).outerHTML;

o

var html = $('#my_div')[0].outerHTML;