jQuery - Manipulación DOM

JQuery proporciona métodos para manipular DOM de manera eficiente. No es necesario escribir código grande para modificar el valor del atributo de ningún elemento o para extraer código HTML de un párrafo o división.

JQuery proporciona métodos como .attr (), .html () y .val () que actúan como captadores, recuperando información de los elementos DOM para su uso posterior.

Manipulación de contenido

los html( ) El método obtiene el contenido html (innerHTML) del primer elemento coincidente.

Aquí está la sintaxis del método:

selector.html( )

Ejemplo

A continuación se muestra un ejemplo que utiliza los métodos .html () y .text (val). Aquí .html () recupera contenido HTML del objeto y luego el método .text (val) establece el valor del objeto usando el parámetro pasado -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = $(this).html();
               $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Reemplazo del elemento DOM

Puede reemplazar un elemento DOM completo con los elementos HTML o DOM especificados. losreplaceWith( content ) El método sirve muy bien para este propósito.

Aquí está la sintaxis del método:

selector.replaceWith( content )

Aquí el contenido es lo que quieres tener en lugar del elemento original. Puede ser HTML o texto simple.

Ejemplo

A continuación se muestra un ejemplo que reemplazaría el elemento de división con "<h1> JQuery is Great </h1>" -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Esto producirá el siguiente resultado:

Eliminar elementos DOM

Puede haber una situación en la que desee eliminar uno o más elementos DOM del documento. JQuery proporciona dos métodos para manejar la situación.

los empty( ) método elimina todos los nodos secundarios del conjunto de elementos coincidentes donde como método remove( expr ) El método elimina todos los elementos coincidentes del DOM.

Aquí está la sintaxis del método:

selector.remove( [ expr ])

or 

selector.empty( )

Puede pasar el parámetro opcional expr para filtrar el conjunto de elementos que se eliminarán.

Ejemplo

A continuación se muestra un ejemplo en el que los elementos se eliminan tan pronto como se hace clic en ellos:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Esto producirá el siguiente resultado:

Insertar elementos DOM

Puede haber una situación en la que desee insertar uno o más elementos DOM nuevos en su documento existente. JQuery proporciona varios métodos para insertar elementos en varias ubicaciones.

los after( content ) método inserta contenido después de cada uno de los elementos coincidentes donde como método before( content ) El método inserta contenido antes de cada uno de los elementos coincidentes.

Aquí está la sintaxis del método:

selector.after( content )

or

selector.before( content )

Aquí el contenido es lo que desea insertar. Puede ser HTML o texto simple.

Ejemplo

A continuación se muestra un ejemplo en el que se insertan elementos <div> justo antes del elemento en el que se hace clic:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Esto producirá el siguiente resultado:

Métodos de manipulación DOM

La siguiente tabla enumera todos los métodos que puede usar para manipular elementos DOM:

No Señor.	Método y descripción
1	después (contenido) Inserte contenido después de cada uno de los elementos coincidentes.
2	añadir (contenido) Agrega contenido al interior de cada elemento coincidente.
3	appendTo (selector) Agregue todos los elementos coincidentes a otro conjunto de elementos especificado.
4	antes (contenido) Inserte contenido antes de cada uno de los elementos coincidentes.
5	clon (bool) Clone los elementos DOM coincidentes y todos sus controladores de eventos, y seleccione los clones.
6	clon () Clonar elementos DOM coincidentes y seleccionar los clones.
7	vacío () Elimine todos los nodos secundarios del conjunto de elementos coincidentes.
8	html (val) Establezca el contenido html de cada elemento coincidente.
9	html () Obtenga el contenido html (innerHTML) del primer elemento coincidente.
10	insertAfter (selector) Inserte todos los elementos coincidentes después de otro conjunto de elementos especificado.
11	insertBefore (selector) Inserte todos los elementos coincidentes antes de otro conjunto de elementos especificado.
12	anteponer (contenido) Añada contenido al interior de cada elemento coincidente.
13	prependTo (selector) Anteponer todos los elementos coincidentes a otro conjunto de elementos especificado.
14	eliminar (expr) Elimina todos los elementos coincidentes del DOM.
15	replaceAll (selector) Reemplaza los elementos emparejados por el selector especificado con los elementos emparejados.
dieciséis	replaceWith (contenido) Reemplaza todos los elementos coincidentes con los elementos HTML o DOM especificados.
17	texto (val) Establezca el contenido de texto de todos los elementos coincidentes.
18	texto () Obtenga el contenido de texto combinado de todos los elementos coincidentes.
19	envolver (elem) Envuelva cada elemento coincidente con el elemento especificado.
20	envolver (html) Envuelva cada elemento coincidente con el contenido HTML especificado.
21	wrapAll (elem) Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor.
22	wrapAll (html) Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor.
23	wrapInner (elem) Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con un elemento DOM.
24	wrapInner (html) Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con una estructura HTML.

↰ Previous page Next page ↱