append metodi

append metodi biron bir elementning oxiriga boshqa elementni qo'shish imkonini beradi. Usul parametri sifatida odatda createElement orqali yaratilgan elementni yoki satrni qabul qiladi. Bir vaqtning o'zida bir nechta elementlarni yoki satrlarni vergul bilan ajratib qo'shish mumkin.

Sintaksis

javascriptota.append(element yoki satr);

Misol

Keling, abzats yaratamiz, unga matn o'rnatamiz va sahifada #parent blokining oxiriga joylashtiramiz:

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

Kodni bajarish natijasi:

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

Misol

Keling, bir vaqtning o'zida bir nechta abzatslarni #parent blokining oxiriga joylashtiramiz:

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

Kodni bajarish natijasi:

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

Misol

Keling, usul parametri sifatida satrdan foydalanamiz:

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

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

Kodni bajarish natijasi:

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

Misol

ul berilgan. Keling, uning ichiga 9 ta li teglarini joylashtiramiz, shu bilan birga ularning matniga tartib raqamlarini yozamiz:

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

Kodni bajarish natijasi:

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>

Misol

Keling, jadvalni tr va td lar bilan to'ldiramiz:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr yaratamiz
  
  // Tr ni td lar bilan to'ldiramiz:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td yaratamiz
    td.textContent = j; // unga matn yozamiz
    
    tr.append(td); // yaratilgan td ni tr ning oxiriga qo'shamiz
  }
  
  table.append(tr); // yaratilgan tr ni jadvalning oxiriga qo'shamiz
}

Kodni bajarish natijasi:

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>

Shuningdek qarang