RSS Feed

DOM: Obteniendo y asignando texto con jQuery

6

abril 16, 2012 by - @pjnovas

jQuery nos brinda 3 formas de obtener y asignar contenido como texto al DOM.

.val()
Obtener y asignar el valor de controles de formulario como ser input, select y textarea
.text()
Obtener y asignar el texto de cualquier elemento DOM. Específicamente utiliza en la propiedad innerHTML
.html()
Lo mismo que el text() con la diferencia que el texto es interpretado como HTML, no como texto plano

Los tres métodos trabajan de la misma manera al momento de obtener o asignar: para asignar, simplemente enviamos un string por parámetro y para obtener no enviamos ningún parámetro:

//Obtener
var valorInput = $("#unInput").val();
var valorSpan = $("#unSpan").text();
var valorDiv = $("#unDiv").html();

//Asignar
$("#unInput").val(valorInput + " ... Nuevo");
$("#unSpan").text(valorSpan + " ... Nuevo");
$("#unDiv").html(valorDiv + "<b> ... Nuevo</b>");

//Diferencia entre text() y html()

$("#unDiv").text("<span>HOLA!</span>"); 
//resultado: <span>HOLA!</span>

$("#unDiv").html("<span>HOLA!</span>");
//resultado: HOLA!

Desde la versión 1.4 de jQuery el método .html() puede recibir una función y con un return dentro de la misma asignamos el innerHTML al elemento selecionado.

$("#unDiv").html(function(){
  return "Elementos hijos: " + $(this).children('*').length;
});

Puntos importantes a tener en cuenta al utilizarlos:

//val() como SET retorna el elemento
$('#unInput').val('Hola').addClass('alerta').show();

//val() como GET retorna el texto, no así su elemento
//simplemente podemos mover su get al final
var valor = $('#unInput').removeClass('alerta').val();

//De la misma manera funcionan el text() y el html().
// SET: html, text y val asignan el valor a todos 
$('div').html('<p>Contenido pisado con este Párrafo</p>');

// GET: 
// html devuelve SOLO el innerHTML del primer elemento
var innerHTML_del_primer_DIV = $('div').html();

// text devuelve un concatenado de todos los innerHTML
var cadena = $('div, span, label').text();

// val devuelve un arreglo con los valores
// un select con multiple="multiple"
var paisesSeleccionados = $('#paises').val();
// Pisamos sin limpiar y perdemos la referencia
// a lo que ya existia de DOM
$("#unDiv").html("<span>Piso todo</span>");
// Limpiamos el contenido del div antes de asignar
// nuevo html
$("#unDiv").empty().html("<span>Piso todo</span>");

Al momento de asignar con el método html() y pisar el contenido hay que tener en cuenta limpiar la memoria de los elementos antes de hacerlo para evitar que la memoria se nos vaya de las manos. Pueden ver mas sobre empty() y remove() en este post



Les dejo el jsFiddle con un ejemplo para que hagan pruebas: http://jsfiddle.net/pjnovas/nwWYu/


  • http://twitter.com/pepoviola pepo

    Muy bueno, completo y bien explicado!

  • tumaaama

    que te den

  • MAr

    Me super ayudaste. Muchas Gracias.

  • Tomás Reyes Campos

    Muy bueno , gracias por el aporte :D (Y)

  • jorege

    Muchas gracias esta muy bueno el tutorial de estas increíbles funciones. Saludos

  • Súper Chinazo

    var li = $(“”
    + “
    + this.label + “
    “);

    var lstTexto = li.find(‘a’).text();
    li.remove(‘a’).text(lstTexto);