append методу

append методу аркылуу бир элементи башка бир элементин аягына кошсо болот. Метод параметри катары адатта createElement аркылуу түзүлгөн элементти, же сапты кабыл алат. Бир нече элементти же сапты үстүртөн кошуп, аларды үтүр менен бөлүп көрсөтсө болот.

Синтаксис

javascriptata-enen.append(элемент же сап);

Мисал

Абзац түзөлү, ага текст коюп, барактын #parent блоктун аягына коёлу:

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

Кодду иштетүүнүн натыйжасы:

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

Мисал

Бир нече абзацты бир эле учурда #parent блоктун аягына коёлу:

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

Кодду иштетүүнүн натыйжасы:

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

Мисал

Методдун параметри катары сапты колдонолу:

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

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

Кодду иштетүүнүн натыйжасы:

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

Мисал

ul берилген. Анын ичинде 9 li тегин жайгаштыралы, ал эми алардын текстине иреттик номерлерди коёлу:

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

Кодду иштетүүнүн натыйжасы:

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>

Мисал

Таблицаны tr-лар жана td-лер менен толтуралы:

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

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // tr түзөлү
  
  // tr'ны td'лер менен толтуралы:
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // td түзөлү
    td.textContent = j; // ага текст жазалы
    
    tr.append(td); // түзүлгөн td'ни tr'нын аягына кошолу
  }
  
  table.append(tr); // түзүлгөн tr'ны таблицанын аягына кошолу
}

Кодду иштетүүнүн натыйжасы:

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>

Ошондой эле караңыз