Come convertire un HTMLElement in una stringa

Question

Ho intenzione di creare un elemento xml in javascript per lo scambio di dati con il lato server. Ho scoperto che posso farlo con document.createElement.Ma non so come convertirlo in stringa. C'è qualche API nel browser per renderlo più facile? O c'è qualche js lib a incappare in questa API?

Grazie in anticipo.

// modifica

ho scoperto che il browser API XMLSerializer, dovrebbe essere il modo giusto per serializzare a stringa.

Answer 1

Si può ottenere il 'esterno html' clonando l'elemento, aggiungendolo ad un contenitore vuoto, 'fuori scena', e leggendo il innerHTML del contenitore.

Questo esempio accetta un secondo parametro facoltativo.

Chiama document.getHTML (elemento, vero) per includere i discendenti dell'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

C'è una proprietà tagName, e una proprietà attributes così:

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

Vedi anche How to iterate through all attributes in an HTML element? (ho fatto!)

per ottenere il contenuto tra i tag di apertura e chiusura, probabilmente si potrebbe usare innerHTML se non vuoi iterare su tutti gli elementi figlio ...

alert(element.innerHTML); 

... e poi ottenere nuovamente il tag di chiusura con tagName.

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

Answer 3

L'elemento outerHTML proprietà (nota: supported by Firefox after version 11) restituisce il codice HTML del l'intero elemento.

Esempio

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

Allo stesso modo, è possibile utilizzare innerHTML per ottenere il codice HTML contenuto all'interno di un dato elemento, o innerText per ottenere il testo all'interno di un elemento (sans HTML markup).

Vedere anche

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

Answer 4

questo potrebbe non applicarsi a caso tutti, ma quando si estraggono da XML Ho avuto questo problema, che ho risolto con questo.

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

quindi ottenere il xml:

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

Poi Allora ho fatto questa funzione per estrarre la linea xml, quando ho bisogno di leggere da un file XML, che contiene tag html.

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

e ora a concludere:

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

Il modo più semplice per farlo è copiare innerHTML di tale elemento a TMP variabile e renderlo vuoto, poi aggiungi nuovo elemento, e dopo che copia di tmp variabile ad esso. Ecco un esempio che ho usato per aggiungere lo script jquery all'inizio della testa.

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; 

Quel semplice :)