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> 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
    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>. el 21 nov. 2018 a las 17:44
  • Entiendo. Eh editado mi respuesta. Suerte! 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 :( el 21 nov. 2018 a las 17:47
  • Agregué un método alternativo usando sólo javascript
    – JCAguilera
    el 21 nov. 2018 a las 17:58

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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