web-dev-qa-db-fra.com

Comment ajouter une classe à un élément créé par appendChild

Je veux demander comment ajouter une classe pour un élément créé par appendChild en javascript

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

Comment ajouter une classe pour l'élément d'entrée que j'ai créé?

Je viens d'utiliser Javascript et je n'aime pas jQuery, veuillez envoyer votre réponse en javascript pur.

18
Alfred Seattle

Je veux demander comment ajouter une classe pour un élément créé par appendChild en javascript

Comme tout autre élément, vous avez une référence. Peu importe qu'il soit créé dans JS via createElement ou que vous ayez obtenu une référence au noeud d'une autre manière. En supposant que input contient la référence à votre nœud:

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

Vous pouvez soit utiliser className :

input.className = "foo";

classList :

input.classList.add("foo");

setAttribute :

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

Le premier est largement pris en charge par tous les navigateurs. Je vous suggère donc vivement de le faire, sauf si vous n’êtes pas dans un navigateur moderne et si vous souhaitez manipuler chaque classe que vous définissez. classList sera donc plus utile. J'évite fortement ce dernier point, car avec setAttribute, vous allez définir l'attribut HTML et non le nom de classe de l'objet JS: le navigateur mappera cette valeur sur la propriété du JS mais, dans certains cas, elle échouera (voir, par exemple, , certaines versions d’IE) afin que la classe ne soit pas appliquée même si le noeud HTML a cet attribut.

Notez que toutes les méthodes ci-dessus fonctionnent malgré la manière dont la référence de noeud HTML est obtenue.

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

Etc.

Dans votre cas, étant donné que appendChild renvoie la référence au nœud ajouté, vous pouvez également tout écrire dans une instruction:

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

J'espère que ça aide.

42
ZER0

Vous avez besoin d'une variable pour l'élément créé.

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

Mettre à jour:

.appendChild retourne l'enfant, vous pouvez donc aussi le faire sans une variable:

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

Utilisez les méthodes setAttribute et getAttribute:

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

Comme:

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