Método append
El método append permite insertar al
final de algún elemento otro elemento. Como parámetro
el método acepta un elemento, generalmente creado
a través de createElement,
o una cadena. Se pueden agregar varios
elementos o cadenas a la vez, enumerándolos separados por comas.
Sintaxis
padre.append(elemento o cadena);
Ejemplo
Vamos a crear un párrafo, establecerle texto
y colocarlo en la página al final del bloque #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.append(p);
Resultado de ejecutar el código:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Ejemplo
Coloquemos varios párrafos a la vez al final
del bloque #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.textContent = 'a';
let p2 = document.createElement('p');
p2.textContent = 'b';
parent.append(p1, p2);
Resultado de ejecutar el código:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Ejemplo
Usemos una cadena como parámetro del método:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Resultado de ejecutar el código:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Ejemplo
Dado un ul.
Coloquemos en él 9 etiquetas li,
y hagamos que su texto sean números ordinales:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
parent.append(li);
}
Resultado de ejecutar el código:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Ejemplo
Llenemos la tabla con trs y tds:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // creamos un tr
// Llenamos el tr con tds:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // creamos un td
td.textContent = j; // escribimos texto en él
tr.append(td); // agregamos el td creado al final del tr
}
table.append(tr); // agregamos el tr creado al final de la tabla
}
Resultado de ejecutar el código:
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Véase también
-
método
prepend,
que inserta elementos al principio -
método
appendChild,
que inserta elementos al final -
método
insertBefore,
que inserta un elemento antes de otro elemento -
método
insertAdjacentElement,
que inserta un elemento en un lugar especificado -
método
insertAdjacentHTML,
que inserta etiquetas en un lugar especificado
