append metodi
append metodi bir element içine başga bir elementi soňuna goýmaga mümkinçilik berýär. Metod parametri hökmünde, esasan createElement arkaly döredilen elementi ýa-da setiri kabul edýär. Birwagtda birnäçe elementleri ýa-da setirleri goşup bolýar, olary vergül bilen sanap geçmek ýeterlik.
Sintaksis
enem.append(element ýa-da setir);
Mysal
Geliň bir abzas döredeliň, oňa tekst belleliň we sahypada #parent blogunyň soňuna goýalyň:
<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);
Kody ýerine ýetirmegiň netijesi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Mysal
#parent blogunyň soňuna derrew birnäçe abzaslary goýalyň:
<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);
Kody ýerine ýetirmegiň netijesi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>a</p>
<p>b</p>
</div>
Mysal
Geliň metod üçin parametr hökmünde setir ulanyň:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Kody ýerine ýetirmegiň netijesi:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
!
</div>
Mysal
ul berlen.
Geliň onuň içine 9 sany li tegini goýup, olaryň tekstini tertip belgileri edeliň:
<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);
}
Kody ýerine ýetirmegiň netijesi:
<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>
Mysal
Geliň tablisany tr-kalar we td-şiklar bilen dolduryň:
<table id="table"></table>
let table = document.querySelector('#table');
for (let i = 1; i <= 3; i++) {
let tr = document.createElement('tr'); // tr-ka döredýäris
// tr-kany td-şiklar bilen doldurýarys:
for (let j = 1; j <= 3; j++) {
let td = document.createElement('td'); // td-şka döredýäris
td.textContent = j; // oňa tekst ýazýarys
tr.append(td); // döredilen td-şkany tr-kanyň soňuna goşýarys
}
table.append(tr); // döredilen tr-kany tablisanyň soňuna goşýarys
}
Kody ýerine ýetirmegiň netijesi:
<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>
Şeýle-de görüň
-
prependmetodi,
elementleri başyna goşýar -
appendChildmetodi,
elementleri soňuna goşýar -
insertBeforemetodi,
elementleri bir elementden öň goşýar -
insertAdjacentElementmetodi,
elementleri bellenen ýere goşýar -
insertAdjacentHTMLmetodi,
tegleri bellenen ýere goşýar
