Append metodas

Metodas append leidžia įterpti į kito elemento galą kitą elementą. Kaip parametrą metodas priima elementą, paprastai sukurtą per createElement, arba eilutę. Galima pridėti iš karto kelis elementus ar eilutes, išvardijant juos per kablelį.

Sintaksė

javascripttėvinis.append(elementas ar eilutė);

Pavyzdys

Sukurkime pastraipą, nustatykime jai tekstą ir patalpinkime puslapyje į bloko #parent galą:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.append(p);

Kodo vykdymo rezultatas:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

Pavyzdys

Patalpinkime iš karto kelias pastraipas į bloko #parent galą:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.append(p1, p2);

Kodo vykdymo rezultatas:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>a</p>
  <p>b</p>
</div>

Pavyzdys

Panaudokime kaip metodo parametrą eilutę:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
parent.append('!');

Kodo vykdymo rezultatas:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  !
</div>

Pavyzdys

Duotas ul. Patalkime jame 9 li žymes, o jų tekstu padarykime eilinius numerius:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.append(li);
}

Kodo vykdymo rezultatas:

html<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>

Pavyzdys

Užpildykime lentelę tr-ėmis ir td-ėmis:

html<table id="table"></table>

javascriptlet table = document.querySelector('#table');

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // sukuriam tr-ę
  
  // Užpildome tr-ę td-ėmis:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // sukuriam td-ę
    td.textContent = j; // įrašome į ją tekstą
    
    tr.append(td); // pridedame sukurtą td-ę į tr-ės galą
  }
  
  table.append(tr); // pridedame sukurtą tr-ę į lentelės galą
}

Kodo vykdymo rezultatas:

html<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>

Taip pat žiūrėkite