Changer la valeur d'un span via la console du Navigateur ?

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:

---

<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.

Code:

---

document.querySelector("#fullname")

---

ou

Code:

---

document.getElementById("fullname")

---

puis

Code:

---

… .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:

---

$("#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 :P

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

Code:

---

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

---

???

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

Code:

---

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

---

dans la Console du Navigateur ???

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

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:

---

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

---

?????????

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.

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 ???

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:

---

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

---

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

Code:

---

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:

---

num = Number.parseInt(num, 10);

---

Voir Number.parseInt.

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 ...)