Maison > interface Web > js tutoriel > Comment mettre à jour le contenu du texte sans affecter les éléments enfants en JavaScript et jQuery ?

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

Mary-Kate Olsen
Libérer: 2024-12-07 15:28:11
original
362 Les gens l'ont consulté

How to Update Text Content without Affecting Child Elements in JavaScript and 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>
Copier après la connexion

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';
Copier après la connexion

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';
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal