Comment mettre à jour le contenu du texte sans affecter les éléments enfants en JavaScript et jQuery ?

Manipulation de texte : préserver les éléments enfants

Question :

Comment puis-je mettre à jour dynamiquement le texte d'un élément sans affecter son enfant des éléments ? Considérez le code HTML suivant :

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

En tant que débutant dans jQuery, trouvez une fonction ou un sélecteur approprié pour accomplir cette tâche sans introduire de conteneur de texte supplémentaire.

Réponse :

Bien que jQuery propose des méthodes avancées pour une telle manipulation, une solution est également possible en utilisant Vanilla JavaScript. La propriété childNodes donne accès à tous les nœuds d'un élément, y compris les nœuds de texte.

Par exemple, si le texte à modifier est toujours le premier élément du div, ce code peut être utilisé :

var divElement = document.getElementById('your_div');
var textNode = divElement.childNodes[0];

textNode.nodeValue = 'new text';

Alternativement, jQuery peut être utilisé pour cibler le div et obtenir la référence au nœud de texte :

var divElement = $('your_div').get(0);
var textNode = divElement.childNodes[0];

textNode.nodeValue = 'new text';

Cette méthode met à jour efficacement le contenu du texte tout en conservant la structure et le contenu d'origine des éléments enfants.

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!