web-dev-qa-db-fra.com

Comment ajouter du texte dans span après document.createElement ("span") ;?

J'essaie d'écrire du texte dans un élément avec la fonction .text (), mais j'ai eu cette erreur UncaughtTypeError: undefined n'est pas une fonction , et j'ai également essayé function append (), innerHtml (), createTextNode ( ) sans succès.

Qu'est-ce que je fais mal?

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.text("Close"); //UncaughtTypeError: undefined is not a function

OR

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.append("Close"); //UncaughtTypeError: undefined is not a function
javascriptjquerydom
12
Joe

Puisque vous commencez avec du code DOM pur, je vous suggère de continuer avec le code DOM pur:

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.textContent = "Close";

En d'autres termes, il suffit de définir textContent sur la valeur souhaitée. 

Si la compatibilité avec IE 8 ou une version antérieure vous importe, notez que textContent n'existe pas pour ces navigateurs plus anciens. Pour les plus âgés, vous devrez utiliser innerText (qui fonctionne sur IE 8 mais ne fait pas partie d'un standard) ou innerHTML. Voir la page MDN sur textContent (à laquelle je fais un lien ci-dessus) pour une discussion sur les différences entre ces champs.

27
Louis

Si vous non voulez utiliser jquery, vous utiliseriez closeSpan.appendChild et document.createTextNode comme suit:

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.appendChild(document.createTextNode("Close"));

Cette méthode maximise la compatibilité entre navigateurs. Cela fonctionnera dans tous les navigateurs, y compris les anciennes versions d'IE.

Si vous do voulez utiliser jquery, vous pouvez le faire en une seule ligne:

var closeSpan = $("<span></span>").addClass("sr-only").text("Close")[0];
1
Sean

Vous pouvez essayer aussi 

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.html("Close");
1
anusha

En supposant que vous souhaitiez ajouter la balise "span" à une div portant l'id "myDiv":

var span = $("span"); // create element span
$(span).html("your text"); // add text
$("#myDiv").append($(span)); // append it to the div element
0
Joe