El mejor tutorial de jQuery añadir elementos en 2024. En este tutorial podrás aprender Añadir un nuevo contenido HTML,jQuery método append (),Ejemplos,jQuery prepend método (),Ejemplos,Añadir varios elementos nuevos por el método append () y anteponer (),Ejemplos,jQuery después () y el método antes (),Ejemplos,Mediante la adición de una serie de nuevos elementos después () y antes () método,Ejemplos,

jQuery añadir elementos

Por jQuery, puede añadir fácilmente nuevos elementos / contenido.


Añadir un nuevo contenido HTML

Vamos a aprender a añadir nuevos contenidos para cuatro método de jQuery:

  • append () - Introducir en el extremo del elemento seleccionado
  • prepend () - insertar al principio del elemento seleccionado
  • después () - Insertar después de ser elementos seleccionados
  • antes) (- Insertar elementos seleccionados antes

jQuery método append ()

método jQuery append () inserta el contenido en el extremo del elemento seleccionado.

Ejemplos

. $ ( "P") append ( " agregar texto");

Trate »


jQuery prepend método ()

método jQuery prepend () inserta el contenido al principio del elemento seleccionado.

Ejemplos

. $ ( "P") Anteponer ( " añadir texto al principio");

Trate »


Añadir varios elementos nuevos por el método append () y anteponer ()

En el ejemplo anterior, estamos sólo al principio del elemento / extremo de inserción de texto / HTML seleccionado.

método, sin embargo, append () y anteponer () puede recibir un número ilimitado de nuevos elementos por el parámetro. Puede generar un texto / HTML (como en el ejemplo anterior) por jQuery, o por medio de código JavaScript y elementos DOM.

En el siguiente ejemplo, creamos varios elementos nuevos. Estos elementos pueden ser creados usando texto / HTML, jQuery o JavaScript / DOM. A continuación, añadimos el método () de estos nuevos elementos añadidos al texto (por anteponer () igualmente eficaz):

Ejemplos

función appendText () { var txt1 = "<p> texto </ p>."; // crear un texto utilizando etiquetas HTML var . Txt2 = $ ( "<p > </ p>") texto ( " texto".); // Crear un texto usando jQuery var . Txt3 = createElement documento ( "p ") ";. txt3 innerHTML = texto."; // Crear un texto utilizando el texto con DOM DOM $ ( "Cuerpo") adición ( txt1, txt2 txt3) ;. // anexar el nuevo elemento }

Trate »


jQuery después () y el método antes ()

método jQuery después () para insertar el contenido después del elemento seleccionado.

método jQuery antes () antes de las inserciones de elementos seleccionados.

Ejemplos

$ ( "Img") después ( " después de que el añadir texto") ;. $ ( "img ") antes ( " añadir texto al frente");

Trate »


Mediante la adición de una serie de nuevos elementos después () y antes () método

después () y antes de () puede recibir un número ilimitado de nuevos elementos por el parámetro. Se pueden crear nuevos elementos a través de texto / HTML, jQuery o JavaScript / DOM.

En el siguiente ejemplo, creamos varios elementos nuevos. Estos elementos pueden ser creados usando texto / HTML, jQuery o JavaScript / DOM. A continuación, después de () de estos nuevos elementos en el texto (de antes () igualmente eficaz):

Ejemplos

función afterText () { var txt1 = "<b> I < / b>"; // crear elementos usando HTML var txt2 = $ ( "<i> </ i>") texto ( "amor") ;. // crear elementos usando jQuery var txt3 = createElement documento ( "grande" ) ;. // crear elementos usando el DOM txt3 innerHTML = "jQuery!"; . $ ( "img") después de (txt1, txt2 txt3) ;. // añadir texto en la imagen }

Trate »
jQuery añadir elementos
10/30