Javascript: ho la rappresentazione DOM di un nodo (elemento o documento) e sto cercando la sua rappresentazione in stringa. Per esempio,
var el = document.createElement("p"); el.appendChild(document.createTextNode("Test"));
dovrebbe produrre:
get_string(el) == "Test
";
Ho la sensazione forte, che mi manca qualcosa di banalmente semplice, ma semplicemente non trovo un metodo che funzioni in IE, FF, Safari e Opera. Pertanto, outerHTML non è un’opzione.
È ansible creare un nodo genitore temporaneo e ottenere il contenuto HTML interno di esso:
var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); var tmp = document.createElement("div"); tmp.appendChild(el); console.log(tmp.innerHTML); // Test
EDIT: Si prega di consultare la risposta di seguito su outerHTML. el.outerHTML dovrebbe essere tutto ciò che è necessario.
Quello che stai cercando è ‘outerHTML’, ma ho bisogno di un fallback coz non compatibile con i vecchi browser.
var getString = (function() { var DIV = document.createElement("div"); if ('outerHTML' in DIV) return function(node) { return node.outerHTML; }; return function(node) { var div = DIV.cloneNode(); div.appendChild(node.cloneNode(true)); return div.innerHTML; }; })(); // getString(el) == "Test
"
Qui troverai il mio plugin jQuery: ottieni l’HTML esterno dell’elemento selezionato
Sotto FF è ansible utilizzare l’object XMLSerializer
per serializzare XML in una stringa. IE ti dà una proprietà xml
di un nodo. Quindi puoi fare quanto segue:
function xml2string(node) { if (typeof(XMLSerializer) !== 'undefined') { var serializer = new XMLSerializer(); return serializer.serializeToString(node); } else if (node.xml) { return node.xml; } }
Non penso che tu abbia bisogno di uno script complicato per questo. Basta usare
get_string=(el)=>el.outerHTML;
Usa l’elemento # outerHTML:
var el = document.createElement("p"); el.appendChild(document.createTextNode("Test")); console.log(el.outerHTML);
Può anche essere usato per scrivere elementi DOM. Dalla documentazione di Mozilla:
L’attributo outerHTML dell’interfaccia DOM dell’elemento ottiene il frammento HTML serializzato che descrive l’elemento inclusi i suoi discendenti. Può essere impostato per sostituire l’elemento con i nodes analizzati dalla stringa specificata.
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
Utilizza element.outerHTML per ottenere la rappresentazione completa dell’elemento, inclusi tag e attributi esterni.
Se il tuo elemento ha un genitore
element.parentElement.innerHTML
Ho sprecato un sacco di tempo a capire cosa c’è che non va quando eseguo un’iterazione di DOMElements con il codice nella risposta accettata. Questo è ciò che ha funzionato per me, altrimenti ogni secondo elemento scompare dal documento:
_getGpxString: function(node) { clone = node.cloneNode(true); var tmp = document.createElement("div"); tmp.appendChild(clone); return tmp.innerHTML; },
se si usa reactjs:
const html = ReactDOM.findDOMNode(document.getElementsByTagName('html')[0]).outerHTML;