Conceptos de JQuery

Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado text(), por ejemplo:

let x = $("#parrafo1");

luego si hacemos x.text() obtenemos el contenido del párrafo con id igual a parrafo1.

Luego si queremos cambiar el texto del párrafo deberíamos disponer:

let x = $("#parrafo1");
x.text("Este es el texto nuevo");

Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos cambiar el contenido de muchos elementos con una sola llamada al método text, por ejemplo:

let x=$("p");
x.text("Este texto aparece en todos los párrafos del documento");

El código anterior crea un objeto jQuery con la referencia a todos los párrafos contenidos en el documento. Luego si llamamos al método text enviándole una cadena, esta aparecerá en todo el documento remplazando el contenido de los párrafos actuales.

El siguiente problema muestra el acceso y modificación unitaria y múltiple de contenidos de elementos.

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <input type="button" value="Obtener el texto contenido en un párrafo" id="boton1"><br>
  <input type="button" value="Modificar el texto de un párrafo" id="boton2"><br>
  <input type="button" value="Modificar el texto de los elementos td de una tabla" id="boton3"><br>
  <p id="parrafo1">Texto del primer párrafo</p>
  <table border="1">
    <tr>
      <td>celda 1,1</td>
      <td>celda 1,2</td>
      <td>celda 2,1</td>
      <td>celda 2,2</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(extraerTexto);
  x = $("#boton2");
  x.click(modificarTexto);
  x = $("#boton3");
  x.click(modificarDatosTabla);
}

function extraerTexto() {
  let x = $("#parrafo1");
  alert(x.text());
}

function modificarTexto() {
  let x = $("#parrafo1");
  x.text("Nuevo texto del párrafo");
}

function modificarDatosTabla() {
  let x = $("td");
  x.text("texto nuevo");
}

Como vemos esta página tiene tres botones, al presionarse el primero se dispara la función:

function extraerTexto() {
  let x = $("#parrafo1");
  alert(x.text());
}

Obtenemos la referencia al párrafo mediante su id (recordemos que en una página todos los valores de los id son distintos), luego extraemos el contenido mediante el método text() y lo mostramos en un alert.

La segunda función cambia el contenido del párrafo:

function modificarTexto() {
  let x = $("#parrafo1");
  x.text("Nuevo texto del párrafo");
}

Obtenemos la referencia del párrafo mediante su id y llamamos al método text enviándole el nuevo string a mostrar.

Por último la función:

function modificarDatosTabla() {
  let x = $("td");
  x.text("texto nuevo");
}

Crea un objeto de la clase jQuery con la referencia a todos los elementos td del documento (es decir los td de todas las tablas) y posteriormente mediante el método text modifica el contenido de todos ellos (todos los td del documento se cambian por el string "nuevo texto")

7 - Método text(), text(valor)

Retornar