Cómo convertir un HTMLElement a una cadena

Question

Voy a crear un elemento xml en javascript para intercambiar datos con el servidor. Descubrí que puedo hacerlo con document.createElement. Pero no sé cómo convertirlo en string. ¿Hay alguna API en el navegador para que sea más fácil? ¿O hay js lib incudling esta API?

Gracias de antemano.

// Modificación

me encontré con que el navegador API XMLSerializer, debe ser el camino correcto para serializar a cadena.

Answer 1

Usted puede obtener el 'exterior-html' clonando el elemento, añadiéndolo a un contenedor vacío, 'fuera del escenario', y leyendo el HTML interno del contenedor.

Este ejemplo toma un segundo parámetro opcional.

Llame a document.getHTML (elemento, verdadero) para incluir los descendientes del elemento.

document.getHTML= function(who, deep){ 
    if(!who || !who.tagName) return ''; 
    var txt, ax, el= document.createElement("div"); 
    el.appendChild(who.cloneNode(false)); 
    txt= el.innerHTML; 
    if(deep){ 
     ax= txt.indexOf('>')+1; 
     txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax); 
    } 
    el= null; 
    return txt; 
} 

Answer 2

Hay una propiedad tagName, y una propiedad attributes así:

var element = document.getElementById("wtv"); 
var openTag = "<"+element.tagName; 
for (var i = 0; i < element.attributes.length; i++) { 
    var attrib = element.attributes[i]; 
    openTag += " "+attrib.name + "=" + attrib.value; 
} 
openTag += ">"; 
alert(openTag); 

Véase también How to iterate through all attributes in an HTML element? (lo hice!)

para obtener el contenido entre las etiquetas de apertura y cierre que probablemente podría utilizar innerHTML si no desea iterar sobre todos los elementos secundarios ...

alert(element.innerHTML); 

... y luego obtener la etiqueta de cierre nuevamente con tagName.

var closeTag = "</"+element.tagName+">"; 
alert(closeTag); 

Answer 3

El elemento outerHTML propiedad (nota: supported by Firefox after version 11) devuelve el HTML de todo el elemento.

Ejemplo

<div id="new-element-1">Hello world.</div> 

<script type="text/javascript"><!-- 

var element = document.getElementById("new-element-1"); 
var elementHtml = element.outerHTML; 
// <div id="new-element-1">Hello world.</div> 

--></script> 

Del mismo modo, puede utilizar innerHTML para obtener el código HTML contenida dentro de un elemento dado, o innerText para obtener el texto dentro de un elemento (sans formato HTML).

Ver también

1. outerHTML - Javascript Property
2. Javascript Reference - Elements

Answer 4

esto podría no aplicarse en caso de todos, pero cuando se extraen a partir de XML i tenido este problema, que he resuelto con esto.

function grab_xml(what){ 
var return_xml =null; 
    $.ajax({ 
       type: "GET", 
       url: what, 
       success:function(xml){return_xml =xml;}, 
     async: false 
     }); 
return(return_xml); 
} 

a continuación, obtener el xml:

var sector_xml=grab_xml("p/sector.xml"); 
var tt=$(sector_xml).find("pt"); 

Entonces que luego hizo esta función para extraer la línea xml, cuando necesito para leer desde un archivo XML, que contiene etiquetas HTML.

function extract_xml_line(who){ 
    var tmp = document.createElement("div"); 
    tmp.appendChild(who[0]); 
    var tmp=$(tmp.innerHTML).html(); 
    return(tmp); 
} 

y ahora a la conclusión:

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b> 

Answer 5

La manera más fácil de hacer es copiar innerHTML de ese elemento a TMP variable y lo convierten en vacío, tiene que poner nuevo elemento, y después de que la copia tmp variable para ello. Aquí hay un ejemplo que solía agregar la secuencia de comandos jquery a la parte superior de la cabeza.

var imported = document.createElement('script'); 
imported.src = 'http://code.jquery.com/jquery-1.7.1.js'; 
var tmpHead = document.head.innerHTML; 
document.head.innerHTML = ""; 
document.head.append(imported); 
document.head.innerHTML += tmpHead; 

Ese simple :)