javascript - tiene - Cómo agregar clase a un elemento creado por appendChild

saber si un elemento tiene una clase javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo agregar una clase al elemento DOM en JavaScript? 8 respuestas

Quiero preguntar cómo agregar una clase para un elemento que creo por appendChild en javascript

document.forms[0].appendChild(document.createElement("input"));

¿Cómo agregar una clase para el elemento de entrada que creé?

Solo uso Javascript y no me gusta jQuery, por favor envíe la respuesta en javascript puro.

Answer 1

Quiero preguntar cómo agregar una clase para un elemento que creo por appendChild en javascript

Como cualquier otro elemento tienes una referencia. No importa si se creó en JS a través de createElement , o si obtuvo una referencia al nodo de otra manera. Suponiendo que la input contiene la referencia a su nodo:

var input = document.createElement("input");

Puedes usar className :

input.className = "foo";

classList :

input.classList.add("foo");

setAttribute :

input.setAttribute("class", "foo");

El primero es ampliamente compatible con cualquier navegador, por lo que le sugiero que lo haga a menos que no esté en un navegador moderno y quiera manipular cada clase que establezca, por lo que classList será más útil. setAttribute último, porque con setAttribute establecerás el atributo HTML, no el nombre de clase del objeto JS: entonces el navegador asignará ese valor a la propiedad de JS pero en algunos casos fallará (ver, por ejemplo, , algunas versiones de IE), por lo que la clase no se aplicará aunque el nodo HTML tenga ese atributo.

Tenga en cuenta que todos los métodos anteriores funcionan a pesar de cómo se obtiene la referencia del nodo HTML , por lo que también con:

var input = document.getElementById("my-input");

Y así.

En su caso, dado que appendChild devuelve la referencia al nodo agregado, también puede escribir todo en una declaración:

document.forms[0]
    .appendChild(document.createElement("input"))
    .className = "foo";

Espero eso ayude.

Answer 2

Me gusta:

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";

Answer 3

Necesitas una variable para el elemento creado.

var input = document.createElement("input");
input.className = ''class_to_add'';
document.forms[0].appendChild(input);

Actualizar:

.appendChild devuelve el hijo, por lo que también podría hacerlo sin una variable:

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";

Answer 4

Use los métodos setAttribute y getAttribute:

var i = document.createElement(''input''); 
i.setAttribute(''class'', ''myclass'');
document.forms[0].appendChild(i);