¿Cuál es la diferencia entre $ .add y $ .append JQuery

Question

Me preguntaba y no pude obtener la mejor documentación que indique la diferencia entre $ .add y $ .append cuando tenemos un solo elemento para agregar o anexar a un contenedor .

Gracias de antemano

Answer 1

Dado un objeto jQuery que representa un conjunto de elementos DOM, el método .add() construye un nuevo objeto jQuery a partir de la unión de esos elementos y los que se pasan al método. Pero no inserta el elemento en el DOM, es decir, usando .add(), el elemento se agregará al DOM, pero para verlo en la página debe insertarlo en la página utilizando el método insertion/append.

Answer 2

agregar apenas añade el elemento al objeto jQuery, no se le añade que en el DOM

Append agrega el elemento en el DOM como el niño.

Answer 3

No están relacionados en absoluto.

.add()

añadir elementos al conjunto de elementos emparejados.

e.g.

Si usted quiere hacer,

$('div').css('color':'red'); 
$('div').css('background-color':'yellow'); 
$('p').css('color':'red'); 

A continuación, se puede hacer,

$('div').css('background-color':'yellow').add('p').css('color':'red'); 

Reference

.Append()

Inserción de contenido, especifique por el parámetro, hasta el final de cada elemento en el conjunto de elementos coincidentes.

$('div').append('p'); 

añadirá seleccionado p sobre todo div seleccionada en dom.

Reference

Answer 4

.add()

for example: 
<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li>list item 3</li> 
</ul> 
<p>a random paragraph</p> 

para cambiar el color de los elementos <li> Y el elemento <p> a rojo, se podría escribir:

$("li").css("background-color", "green"); 
$("p").css("background-color", "green"); 

o condensar lo anterior mediante la utilización. add()

$("li").add("p").css("background-color", "green"); 

.append()

creará un nuevo elemento para agregar al DOM y aparecerá como elemento secundario del elemento especificado existente.

<div>one</div> 
<div>two</div> 

<ol> 
    <li>item1</li> 
    <li>item2</li> 
</ol> 

$("div").append('<p>'); 

se traducirá en:

<div>one</div> 
<p></p> 
<div>two</div> 
<p></p> 

<ol> 
    <li>item1</li> 
    <p></p> 
    <li>item2</li> 
    <p></p> 
</ol>