javascript - data - Obtener la representación de cadena de un nodo DOM

javascript get attribute data

Question

Javascript: tengo la representación DOM de un nodo (elemento o documento) y estoy buscando la representación de cadena de la misma. P.ej,

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

debería ceder:

get_string(el) == "<p>Test</p>";

Tengo la fuerte sensación de que me falta algo trivialmente simple, pero simplemente no encuentro un método que funcione en IE, FF, Safari y Opera. Por lo tanto, outerHTML no es una opción.

Answer 1

En FF, puede usar el objeto XMLSerializer para serializar XML en una cadena. IE te da una propiedad xml de un nodo. Entonces puedes hacer lo siguiente:

function xml2string(node) {
   if (typeof(XMLSerializer) !== ''undefined'') {
      var serializer = new XMLSerializer();
      return serializer.serializeToString(node);
   } else if (node.xml) {
      return node.xml;
   }
}

Answer 2

He perdido mucho tiempo averiguando qué está mal cuando repito DOMElements con el código en la respuesta aceptada. Esto es lo que funcionó para mí, de lo contrario, cada segundo elemento desaparece del documento:

_getGpxString: function(node) {
          clone = node.cloneNode(true);
          var tmp = document.createElement("div");
          tmp.appendChild(clone);
          return tmp.innerHTML;
        },

Answer 3

Lo que estás buscando es ''outerHTML'', pero necesitamos una alternativa porque no es compatible con navegadores antiguos.

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) == "<p>Test</p>"

Aquí encontrará mi complemento jQuery: Obtener el HTML externo del elemento seleccionado

Answer 4

No creo que necesites ningún script complicado para esto. Solo usa

get_string=(el)=>el.outerHTML;

Answer 5

Puede crear un nodo padre temporal y obtener el contenido innerHTML del mismo:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

var tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.innerHTML); // <p>Test</p>

EDITAR: Consulte la respuesta a continuación sobre outerHTML. el.outerHTML debería ser todo lo que se necesita.

Answer 6

Si tu elemento tiene padre

element.parentElement.innerHTML

Answer 7

Use Element # outerHTML:

var el = document.createElement("p");
el.appendChild(document.createTextNode("Test"));

console.log(el.outerHTML);

También se puede usar para escribir elementos DOM. De la documentación de Mozilla:

El atributo outerHTML de la interfaz DOM del elemento obtiene el fragmento HTML serializado que describe el elemento, incluidos sus descendientes. Se puede configurar para reemplazar el elemento con nodos analizados a partir de la cadena dada.

developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 8

Use element.outerHTML para obtener una representación completa del elemento, incluidas las etiquetas y los atributos externos.

Answer 9

si usa reaccionar:

const html = ReactDOM.findDOMNode(document.getElementsByTagName(''html'')[0]).outerHTML;