JavaScript es un lenguaje de programación versátil que permite la creación y manipulación de elementos al igual que HTML (Hyper Text Markup Language). Sigue los métodos 'append()' y 'appendChild()' para realizar esta funcionalidad. Como sugiere su nombre, ambos métodos agregan elementos HTML como objetos String o Node. Sin embargo, difieren entre sí dependiendo de sus funcionalidades y otros factores.
Esta guía subraya las diferencias clave entre jQuery “ adjuntar ()” y JavaScript “ añadir Niño ()' métodos.
Antes de pasar a las diferencias entre el jQuery “ adjuntar ()” y JavaScript “ añadir Niño ()”, primero eche un vistazo a los conceptos básicos de estos métodos.
¿Qué es el método jQuery append()?
El jQuery “ adjuntar ()” inserta los objetos “Nodo” y “Cadena” deseados al final como el último elemento secundario del elemento principal.
Sintaxis
$ ( selector ) . adjuntar ( contenido , función ( índice , html ) )En la sintaxis anterior:
- contenido : Se refiere a los elementos HTML, elementos DOM u objetos jQuery.
- función : Es un parámetro adicional que especifica la función de JavaScript definida por el usuario que tiene los parámetros 'índice (posición del elemento)' y 'html (html de los elementos seleccionados)'.
¿Qué es el método appendChild() de JavaScript?
El método 'appendChild()' solo agrega el objeto 'Nodo' después del último elemento secundario del elemento principal. Primero crea el objeto de Nodo deseado usando el método “createElement()” y luego lo agrega.
Sintaxis
elemento. añadir Niño ( nodo )Esta sintaxis requiere solo un parámetro, es decir, ' nodo ”.
Como sugieren sus nombres, los métodos discutidos anteriormente son diferentes entre sí. En esta sección se describen algunos factores en los que son diferentes. Echemos un vistazo a ellos.
Diferencias entre el método jQuery append() y JavaScript appendChild()
| Términos | agregar jQuery () | JavaScript agregar niño () |
|---|---|---|
| Uso | Se puede usar para agregar el elemento principal agregando un nuevo ' Nodo ' y ' Cadena ” objetos al mismo tiempo. | Solo se puede usar para agregar el elemento principal con el nuevo ' Nodo ” creado usando el “ crearElemento ()' método. |
| Objetos de múltiples nodos | El ' adjuntar ()” puede agregar múltiples objetos Node en su elemento principal asociado al mismo tiempo en el siguiente formato. Formato : 'div.append(primer hijo, segundo hijo, 'Linuxhint');' |
El ' añadir Niño ()” funciona bien con múltiples objetos Node, pero solo agrega el primer elemento secundario a la vez y luego el siguiente. Formato : 'div.appendChild(primer hijo, segundo hijo, 'Linuxhint');' |
| Valor de retorno | El ' adjuntar ()” no devuelve el objeto Nodo adjunto ya que muestra un valor devuelto “indefinido”, es decir Formato : console.log(appendChildValue) // indefinido |
Por otro lado, el “ añadir Niño ()” devuelve un valor que contiene el objeto Nodo adjunto. Formato : console.log(appendChildValue) //
|
Ahora pase a la implementación práctica de las diferencias clave enumeradas.
Diferencia 1: Aplicar los métodos jQuery append() y JavaScript appendChild()
Según la primera diferencia, el “ adjuntar ()” agrega Node y String mientras que el método “appendChild()” solo agrega objetos Node.
código HTML
Primero, eche un vistazo al código HTML indicado:
< cuerpo >< h2 > Método jQuery 'agregar ()' < / h2 > //Para agregar() < h2 > Método jQuery 'appendChild()' < / h2 > //Para agregarNiño()
< botón identificación = 'btn1' al hacer clic = 'miFunc1()' > Agregar cadena DOM < / botón >
< botón identificación = 'btn2' al hacer clic = 'miFuncion2()' > Agregar nodo DOM < / botón >
< pag identificación = 'para' > Este es un párrafo. < / pag >
< viejo identificación = 'lista' >
< eso > Tutorial JavaScript 1 < / eso >
< eso > Tutorial JavaScript 2 < / eso >
< eso > Tutorial JavaScript 3 < / eso >
< / viejo >
< / cuerpo >
En las líneas de código anteriores:
- La etiqueta “
” define el subtítulo del nivel 2.
- Las etiquetas “
- La etiqueta '
' crea un párrafo vacío con una identificación asignada 'para' para mostrar el valor de la cadena adjunta.
- La etiqueta '
- ' agrega una lista ordenada con una 'lista' de identificación, y los elementos enumerados con la ayuda de las etiquetas '
- '.
Nota : Siga el código HTML escrito anteriormente en la primera diferencia de los métodos 'append()' y 'appendChild()'.
Código jQuery del método 'agregar ()'
En primer lugar, una descripción general del código jQuery del método 'agregar ()':
< cabeza >< origen del script = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > guion >
< guion >
$ ( documento ) . listo ( función ( ) {
$ ( '#btn1' ) . hacer clic ( función ( ) {
$ ( 'pag' ) . adjuntar ( ' Cadena añadida .' ) ;
} ) ;
$ ( '#btn2' ) . hacer clic ( función ( ) {
$ ( 'ol' ) . adjuntar ( '
} ) ;
} ) ;
guion >
cabeza >
En las líneas de código anteriores:
- Primero, especifique el jQuery “ CDN 'ruta desde su sitio web oficial' https://jquery.com/ ” con la ayuda del “ origen ' atributo.
- A continuación, agregue una pequeña sección de script que primero utilice el ' listo ()” método para invocar el indicado “ función ()” cuando se carga el documento HTML.
- Después de eso, el “ hacer clic ()” ejecuta la función que está vinculada con el botón cuyo id es “ btn1 ” al hacer clic en el botón.
- En la definición de la función, el “ adjuntar ()” se utiliza para agregar el elemento de párrafo de destino con la cadena indicada.
- El mismo proceso se realiza para el agregado “ lista ordenada ” es decir, objeto de nodo para agregarlo al elemento dado.
Producción
Aquí, se confirma que los objetos 'String' y 'Node' se agregan con la ayuda del método 'append()'.
Código JavaScript del método “appendChild()”
Ahora, mire el método JavaScript “appendChild()” prácticamente:
< guion >función miFunc1 ( ) {
para. añadir Niño ( '
Cadena adjunta
' ) //Agregar cadena DOM} función miFunc2 ( ) {
constante elemento = documento. crearElemento ( 'eso' ) ;
constante nodo = documento. crearNodoTexto ( 'Elemento adjunto' ) ;
elemento. añadir Niño ( nodo ) ; //Agregar nodo DOM
constante elemento = documento. getElementById ( 'lista' ) ;
elemento. añadir Niño ( elemento ) ;
}
guion >
En el fragmento de código anterior:
- Defina un nombre de función “ miFunc1 ()” que usa el método “appendChild()” para agregar el párrafo agregado con la cadena dada.
- A continuación, en el “ miFunc2 ()”, el método “createElement()” crea un nuevo elemento de lista y luego le agrega texto usando el método “createTextNode()”.
- Después de eso, agregue el nodo de la lista creada con su texto usando el método 'appendChild ()'.
- Por último, agregue el nodo de lista recién creado a la lista ordenada a la que se accedió cuya identificación es 'lista' con la ayuda del método 'appendChild ()'.
Producción
Como se ve, solo el objeto 'Nodo' se agrega al hacer clic en el botón, no la 'Cadena'.
Error
Presione 'F12' para abrir la consola web e inspeccionar el problema:
Como se ve, la consola muestra un error al agregar el objeto String usando el método 'appendChild()'. Por lo tanto, se confirma que el método 'appendChild()' no agrega un objeto String.
Diferencia 2: aplicar los métodos jQuery append() y JavaScript appendChild() en varios objetos de nodo
La segunda diferencia entre los métodos 'append()' y 'appendChild()' se puede analizar realizando estos métodos en múltiples objetos de nodo. Para ver su implementación práctica, siga los códigos dados.
código HTML
Repasemos el código HTML:
< división identificación = 'principal-div' >< división estilo = 'pantalla: flex; justificar contenido: centro; alinear elementos: centro; ancho: 50 px; altura: 50 px; fondo: rojo anaranjado; margen: 10 px; alineación de texto: centro;' > Uno < / división >
< división estilo = 'pantalla: flex; justificar contenido: centro; alinear elementos: centro; ancho: 50 px; altura: 50 px; fondo: rojo anaranjado; margen: 10 px; alineación de texto: centro;' > Dos < / división >
< división estilo = 'pantalla: flex; justificar contenido: centro; alinear elementos: centro; ancho: 50 px; altura: 50 px; fondo: rojo anaranjado; margen: 10 px; alineación de texto: centro;' > Tres < / división >
< / división >
Aquí, las líneas de código anteriores contienen un elemento principal '
Nota : El código HTML escrito anteriormente se sigue en la segunda diferencia de los métodos 'append()' y 'appendChild()'.
método append()
Ahora, proceda con el siguiente script:
< guion >constante maindiv = documento. getElementById ( 'principal-div' ) ;
constante div4 = documento. crearElemento ( 'div' ) ;
div4. HTML interno = 'Cuatro' ;
div4. estilo . color de fondo = 'rosa' ;
div4. Lista de clase . agregar ( 'div' ) ; constante div5 = documento. crearElemento ( 'div' ) ;
div5. HTML interno = 'Cinco' ;
div5. estilo . color de fondo = 'rosa' ;
div5. Lista de clase . agregar ( 'div' ) ;
principaldiv. adjuntar ( div4 , div5 ) ;
guion >
En el fragmento de código anterior:
- La variable 'maindiv' accede al 'div' agregado usando su id 'main-div' con la ayuda del método 'getElementById()'.
- A continuación, el método 'createElement()' crea un nuevo objeto de nodo 'div', agrega el texto especificado usando la propiedad 'innerHTML' y aplica el color de fondo a través de la propiedad 'style.backgroundcolor'.
- Después de eso, el método 'add ()' agrega las propiedades CSS de la clase especificada utilizando la propiedad 'classList'.
- Se sigue el mismo procedimiento para el siguiente elemento “” recién creado.
- Por último, los dos objetos Node recién creados se agregan al mismo tiempo con la ayuda del método 'append()'.
Producción
Aquí, los múltiples objetos de Nodo recién creados se agregan al mismo elemento principal en consecuencia.
Método “appendChild()”
Luego, continúa con el método “appendChild()”:
< guion >
principaldiv. añadir Niño ( div4 ) ;
principaldiv. añadir Niño ( div5 ) ;
guion >Como se ve, el método 'appendChild()' agrega múltiples objetos Node uno por uno al mismo elemento principal.
Producción
El resultado es el mismo que el del método 'append()' pero diferente en la especificación de los objetos Node.
Diferencia 3: valor de retorno de los métodos jQuery append() y JavaScript appendChild() aplicados
La última diferencia es el “valor devuelto” de los métodos “append()” y “appendChild()”. Veámoslo de manera práctica.
Nota : El código HTML es el mismo que el de la Diferencia 2 (Objetos de múltiples nodos).
Método “añadir()”
Mira las líneas de código dadas:
< guion >
consola. registro ( principaldiv. adjuntar ( div4 ) ) ;
guion >Aquí, el método 'console.log()' se aplica para verificar el valor devuelto del método 'append()' mientras se agrega el objeto de nodo especificado.
Producción
Presiona “F12” para abrir la consola web:
Como se ve, el valor devuelto por el método “append()” es “ indefinido ”.
método appendChild()
Ahora, considere el siguiente código utilizando el método 'appendChild()':
< guion >
consola. registro ( principaldiv. añadir Niño ( div4 ) ) ;
guion >Especifique el método “appendChild()” con el método “console.log()” igual que el método “append()”.
Producción
Aquí, la salida devuelve el elemento HTML adjunto, incluidas las propiedades de estilo.
Conclusión
El jQuery “ adjuntar ()” y el JavaScript “ añadir Niño ()” son diferentes en base a su “ sintaxis”, “uso” y “múltiples objetos Node ”. Además, su “ valores devueltos ” también son diferentes entre sí. Ambos métodos son útiles y su uso depende de las elecciones del usuario. Esta guía enumeró la diferencia entre jQuery “ adjuntar ()” y el JavaScript “ añadir Niño ()” método prácticamente.