Append metodu

append metodu bir elementin sonuna başqa bir element əlavə etməyə imkan verir. Metod parametr kimi adətən createElement vasitəsilə yaradılan elementi və ya sətri qəbul edir. Birdən çox elementi və ya sətri vergüllə ayıraraq bir anda əlavə etmək olar.

Sintaksis

javascriptvalideyn.append(element və ya sətir);

Nümunə

Gəlin bir abzas yaradaq, ona mətn təyin edək və səhifədə #parent blokunun sonuna yerləşdirək:

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);

Kodun icrasının nəticəsi:

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

Nümunə

Gəlin birdən çox abzası bir anda #parent blokunun sonuna yerləşdirək:

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);

Kodun icrasının nəticəsi:

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

Nümunə

Gəlin metodun parametri kimi sətirdən istifadə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə

ul verilib. Gəlin onun içinə 9 ədəd li teqini yerləşdirək, onların mətninə isə sıra nömrələrini yazaq:

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);
}

Kodun icrasının nəticəsi:

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>

Nümunə

Gəlin cədvəli tr-lər və td-lər ilə dolduraq:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr yaradırıq
  
  // Tr-ni td-lər ilə doldururuq:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td yaradırıq
    td.textContent = j; // ona mətn yazırıq
    
    tr.append(td); // yaradılmış td-ni tr-nin sonuna əlavə edirik
  }
  
  table.append(tr); // yaradılmış tr-ni cədvəlin sonuna əlavə edirik
}

Kodun icrasının nəticəsi:

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>

Həmçinin bax