append विधि

append विधि किसी तत्व के अंत में दूसरा तत्व डालने की अनुमति देती है। पैरामीटर के रूप में यह विधि एक तत्व स्वीकार करती है, जो आमतौर पर createElement के माध्यम से बनाया गया होता है, या एक स्ट्रिंग। एक साथ कई तत्व या स्ट्रिंग जोड़ना संभव है, उन्हें अल्पविराम से अलग करके सूचीबद्ध करके।

वाक्य - विन्यास

javascriptparent.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>

यह भी देखें