0

Una consulta que puede ser facil, deseo cambiar el texto de un elemto "p" pero sin afectar su elemento hijo, es decir su elemento debe estar intacto.

<p class="price-cash" >Precio:<strong class="idprecio">$ 0.89</strong></p>

Lo que deseo es que en lugar de "Precio" aparezca otro texto, pero sin afectar el elemento hijo. Lo intenté hacer con jquery, pero me reemplaza todo y se borra el elemnto hijo

$(".price-cash").text('VALOR NUEVO');

4 respuestas 4

1

Puedes hacer algo así: para cambiar el texto y volver a agregar los elementos hijos.

$(function(){
  var p = $('.price-cash');
  var c = p.children();
  p.text('NUEVO PRECIO: ');
  p.append(c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="price-cash">Precio:<strong class="idprecio">$ 0.89</strong></p>

¡Suerte!

0

Creo que no existe una manera directa de hacerlo. Pero se me ocurre un pequeño truquillo para simular el resultado.

var hijo = $('.idprecio').clone();
$('.price-cash').text('Nuevo texto: ');
$('.price-cash').append(hijo);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="price-cash" >Precio:<strong class="idprecio">$ 0.89</strong></p>

Mediante la función clone() hago una "copia" del elemento que deseo preservar antes de añadir el texto nuevo al <p> (porque efectivamente machacaría al <strong> hijo) y finalmente le vuelvo a colgar al padre el elemento hijo.

2
  • muchas gracias por la respuesta. El problema es que el precio del producto es dinámico, y la respuesta que me das es para setear el precio. Yo no tengo control sobre el precio, solo deseo cambiar el texto de <p> Commented el 21 nov. 2018 a las 17:46
  • El código que te he puesto no altera el strong, manteniendo su clase y su contenido. ¿A qué te refieres con tu comentario? Consigue exactamente lo que necesitas, independientemente del precio que tenga dentro el strong.
    – phpMyGuel
    Commented el 21 nov. 2018 a las 17:50
0

La función .append() te permite insertar elementos al DOM. Prueba de la siguiente manera:

$(".price-cash").text('VALOR NUEVO ').append("<strong>$0.80</strong>")

En tu caso específico podrías hacerlo de la siguiente manera:

.html:

     <p class="price-cash">
        <span class="precio_txt">Precio</span>
         <strong class="idprecio">$0.89</strong>
     </p>

.js:

$(document).ready(function() {
    $(".precio_txt").remove()
    $(".idprecio").before('VALOR NUEVO ')
});

Te animo a consultar la documentación oficial de Jquery(http://api.jquery.com/) para conocer mas detalles de esta y otras funciones.

Si la respuesta te ayudó recuerda aceptarla.

2
  • muchas gracias por la respuesta. El problema es que el precio del producto es dinámico, y la respuesta que me das es para setear el precio. Yo no tengo control sobre el precio, solo deseo cambiar el texto de <p>. Commented el 21 nov. 2018 a las 17:44
  • Entiendo. Eh editado mi respuesta. Suerte! Commented el 21 nov. 2018 a las 17:57
0

Puedes encerrar la palabra que quieres cambiar en un span:

<p class="price-cash"><span>Precio:</span><strong class="idprecio">$ 0.89</strong></p>

Y así puedes cambiar su contenido sin modificar el otro elemento:

$(".price-cash > span").text('VALOR NUEVO');

Alternativa

Como comentaste que no tenías control sobre el html, puedes intentar esta solución con javascript puro:

var etiqueta = document.getElementsByClassName("price-cash")[0]; // Primer elemento con la clase price-cash
var texto = etiqueta.childNodes[0]; // El primer nodo 'hijo' de la etiqueta p
texto.nodeValue = 'VALOR NUEVO';
2
  • No tengo control del html :( Commented el 21 nov. 2018 a las 17:47
  • Agregué un método alternativo usando sólo javascript
    – JCAguilera
    Commented el 21 nov. 2018 a las 17:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.