4

Tengo una cadena que contiene código HTML que deseo pasar a un nodo HTML para así poder editarlo como muestro a continuación:

var code = '<p class="c1">Hola mundo</p>';
// Código para convertir
code.className="c";
document.body.appendChild(code);

¿Cómo debería hacerlo?

1
  • Una opción es añadir primero el elemento y luego usar el DOM, ej: document.body.innerHTML = '<p class="c1">Hola mundo</p>'; document.body.firstChild.className = "c".
    – Sal
    Commented el 19 feb. 2023 a las 15:49

2 respuestas 2

5

Estás realizando mal la llamada a appendChild(), ya que debes pasar por parámetro un elemento y no una cadena de caracteres.

Una manera de hacerlo sería:

var code = '<p class="c1">Hola mundo</p>';
/* Creamos un contenedor para el HTML de nuestra variable */
let contenedor = document.createElement("div");
/* Insertamos el HTML en el elemento recién creado */
contenedor.innerHTML = code;
/* Ahora hacemos que tu variable "code" sea el primer hijo del contenedor */
code = contenedor.firstChild;
// Código para convertir
code.className = "c";
/* Agregamos al DOM tu elemento */
document.body.appendChild(code);

Para empezar he creado un contenedor con document.createElement() al que asignaremos el HTML de nuestro código.

Al hacerlo el primer hijo del contenedor será el elemento que deseas editar (en mi código he sobreescrito la variable code, pero yo no usaría la variable como intermedia para contener una cadena de caracteres).

Por último, ya tienes tu variable code preparada para agregarla al DOM del documento o modificar lo que desees de ella (como la clase).

6
  • Donde esta el //comentario se supone que debería haber un código que convierte la variable a un nodo html, pero no hay ninguna función que satisfaga la necesidad? O solo se puede de la manera (forzosa) que sería creando un elemento nodo?
    – NinjaGamer
    Commented el 20 feb. 2023 a las 3:18
  • No, no hay ninguna función nativa que convierta un código HTML a un nodo, ya que se supone que todo HTML debería estar contenido siempre por un elemento superior y, además, tu código HTML podría contener dos o más elementos hermanos (en tu caso solo tienes uno, pero podrías tener más) y en ese caso no tendría lógica la función. Commented el 20 feb. 2023 a las 6:51
  • 2
    Una pequeña aclaración, si existe una función que convierte texto a nodos insertAdjacentHTML. Lamentablemente los inserta directamente sin retornar los nodos resultantes
    – Yussef
    Commented el 20 feb. 2023 a las 9:12
  • @Yussef, para poder usar insertAdjacentHTML() debes proporcionar un nodo contenedor y eso tendría exactamente el mismo efecto colateral que usar innerHTML: la necesidad de usar un elemento contenedor. Y, de nuevo, debes usar firstChild (por ejemplo) para acceder al elemento creado y, en caso de que sean varios hermanos, otra vez pierde sentido. Commented el 20 feb. 2023 a las 9:20
  • 1
    En el ejemplo del OP no hay nodo contenedor. Presupone que su variable code es directamente el nodo <p> de su cadena de caracteres. Lo que posteriormente intenta es hacer una llamada a document.body.appendChild(code); que falla (por los motivos explicados en mi respuesta) y nunca se agrega al documento. Pero incluso si funcionara su código, body no se consideraría su nodo contenedor (el nodo que debe contener el HTML para que puedan generarse los elementos Element), si no su padre. Commented el 20 feb. 2023 a las 9:56
2

Otra alternativa, usando DOMParser

var code = '<p class="c1">Hola mundo</p>';

const doc1 = new DOMParser().parseFromString(code, "text/html").body.firstChild;

doc1.classList.add("rojo");
document.body.appendChild(doc1);
.rojo{
  color:red
}

2
  • 1
    Imagino que serás consciente que estás creando una instancia de un HTMLDocument cuando llamas a parseFromString(). Es como matar moscas a cañonazos (es, a grandes rasgos, como si crearas una página web completa para agregar un único elemento a ella) y, además, con .body estás apuntando al elemento padre del párrafo <p> de la cadena y no al párrafo en sí, con lo que estás cambiando la clase al <body>. Lo habitual es crear únicamente un elemento de tipo HTMLElement contenedor con un document.createElement(). Commented el 20 feb. 2023 a las 9:51
  • 1
    Volvemos a estar de acuerdo, la pregunta ha sido respondida por ti a la perfección. Solo quise presentar un modo alternativo que puede servir a otro casos de uso. Sobre el tema del body, gracias por alertarme, lo he corregido
    – Yussef
    Commented el 20 feb. 2023 a las 9:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.