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.
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";
input.classList.add("foo");
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.
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";
Utilisez les méthodes setAttribute et getAttribute:
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);
Comme:
document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";