Discussion :

[cheboy]

Bonjour.

Je voudrais savoir s'il y a une méthode pour changer la valeur d'un span via la Console du Navigateur Web ??

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="fullname">Trevor</span>

Si oui, comment donc réaliser cela en JQUERY pour que fonctionne à bien et simplement le changement de "Trevor" via la console du Navigateur sachant que l'id est égal à "fullname" ???

Merci d'avance.

[Watilin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector("#fullname")

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("fullname")

puis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

… .textContent = "Franklin";

Attention au jargon : habituellement on réserve le mot « valeur » pour les champs de formulaire. Ici, tu peux dire « contenu texte » ou simplement « contenu ».

Edit : Ah oui pardon, en jQuery.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#fullname").text("Franklin");

Mais c’est une information que tu aurais pu trouver dans n’importe quel tuto, ou dans la doc. Pose une question plus intéressante la prochaine fois

[cheboy]

Ok très grand merci à vous.
Donc, dites-moi, si je peux simplement faire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("fullname").innerHTML = "Franklin";

???

Et puis-je exécuter directement le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#fullname").text("Franklin");

dans la Console du Navigateur ???

[Watilin]

Euh, oui tu peux faire les deux. Je ne comprends pas bien ta question

[cheboy]

Je veux dire pour exécuter cela, devrais-je simplement passer par la console du Navigateur Web ???

Si oui, je voudrais aussi savoir si le Code ci-après aussi est correcte en remplaçant la fonction text() par html() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#fullname").html("Franklin");

?????????

[Watilin]

Oui, tu peux le faire dans la console du navigateur. Le code executé dans la console est équivalent à une balise <script> qui serait injectée dans la page. Le contexte est le même, les variables sont les mêmes, il n’y a pas de séparation.

La méthode jQuery .html(), tout comme la propriété native .innerHTML, implique un surcoût de CPU car la chaîne que tu passes va être analysée à la recherche de balises HTML. En plus de ça, ça pose un risque de sécurité quand tu manipules des données provenant d’une source tierce : un attaquant pourrait tenter d’injecter une balise <iframe>, <script>, <object>, <embed>, <style> ou n’importe quoi d’autre qui peut servir de vecteur d’attaque. Quand tu ajoutes du texte simple, .textContent (natif) ou .text() (jQuery) est à la fois plus performant et plus sûr.

[cheboy]

Ok merci Watilin pour ton explication. Mais une dernière question:

Peut-on ajouter (utiliser) .textContent ou .text() même si le contenu à modifier est un Chiffre ???

[Watilin]

Oui.

Les éléments dans l’arbre DOM ne contiennent que du texte. Quand tu insères un nombre dans le DOM, il est converti en chaîne. Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#compteur").text(42);

Quand tu lis une valeur depuis le DOM, tu reçois une chaîne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
let num = $("#compteur").text();
console.log(typeof num); // affiche "string"

Si tu veux traiter la donnée comme un nombre, il faut la convertir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

num = Number.parseInt(num, 10);

Voir Number.parseInt.

[SpaceFrog]

Juste pour éviter un abus de langage ...
un span n'a pas de value mais un contenu innerHTML ou text ou data
seuls les éléments de formulaires ont un value (input, select ...)