Comment puis-je mettre à jour le texte d'un élément sans affecter ses éléments enfants ?

Modifier le texte d'un élément sans modifier les éléments enfants

Question :

La mise à jour dynamique du texte d'un élément est souvent rencontrée par le Web développeurs, en particulier lorsqu'il s'agit de structures DOM complexes. Considérez l'extrait HTML suivant :

<div>

La tâche consiste à modifier le texte en gras sans affecter les paragraphes enfants. C'est un défi, en particulier pour les débutants en jQuery.

Solution jQuery :

Mark a fourni une solution optimale en utilisant jQuery, qui offre des fonctionnalités succinctes et efficaces :

$("div#my-div").contents().filter(function() {
    return this.nodeType == 3; // Node type 3 represents text nodes
}).text("New Text");

Solution JavaScript (Facultatif) :

En JavaScript pur, le La propriété childNodes peut être utilisée pour accéder à tous les nœuds enfants d'un élément, y compris les nœuds de texte. Si le texte cible est toujours le premier enfant, l'approche suivante peut être utilisée :

var myDiv = document.getElementById("my-div");
var textNode = myDiv.childNodes[0]; // Assume the text is the first child
textNode.nodeValue = "New Text";

Conclusion :

JQuery et JavaScript peuvent être appliqués pour mettre à jour dynamiquement le texte d'un élément tout en préservant ses éléments enfants. La solution jQuery propose une approche concise et générale, tandis que la méthode JavaScript propose une solution plus spécifique qui suppose que le texte est le premier enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!