Nối thêm và thêm vào trước trong JavaScript là gì?

Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu về phương thức prepend() trong JavaScript để chèn các đối tượng Node hoặc đối tượng DOMString trước nút con đầu tiên của nút cha

Giới thiệu về phương thức prepend() của JavaScript

Phương thức prepend() chèn một tập hợp các đối tượng Node hoặc đối tượng DOMString trước nút con đầu tiên của nút cha

parentNode.prepend(...nodes);
parentNode.prepend(...DOMStrings);
Code language: JavaScript (javascript)

Phương thức prepend() chèn các đối tượng DOMString dưới dạng các nút

<ul id="app">
    <li>HTML</li>
</ul>
Code language: HTML, XML (xml)

Phương thức prepend() trả về

<ul id="app">
    <li>HTML</li>
</ul>
Code language: HTML, XML (xml)

Các ví dụ về phương thức prepend() trong JavaScript

Hãy lấy một số ví dụ về việc sử dụng phương pháp prepend()

1) Sử dụng phương thức prepend() để thêm vào trước một phần tử ví dụ

Giả sử bạn có phần tử

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);
Code language: JavaScript (javascript)

<ul id="app">
    <li>HTML</li>
</ul>
Code language: HTML, XML (xml)

Ví dụ này cho thấy cách tạo danh sách các phần tử

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);
Code language: JavaScript (javascript)

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);
Code language: JavaScript (javascript)

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);
Code language: JavaScript (javascript)

Đầu ra HTML

Làm thế nào nó hoạt động

• Đầu tiên, chọn phần tử

  let app = document.querySelector('#app');
  
  let langs = ['CSS','JavaScript','TypeScript'];
  
  let nodes = langs.map(lang => {
      let li = document.createElement('li');
      li.textContent = lang;
      return li;
  });
  
  app.prepend(...nodes);
  Code language: JavaScript (javascript)

  2 theo id của nó bằng cách sử dụng phương thức querySelector()
• Thứ hai, khai báo một mảng các chuỗi
• Thứ ba, đối với mỗi phần tử trong một mảng, hãy tạo một phần tử

  let app = document.querySelector('#app');
  
  let langs = ['CSS','JavaScript','TypeScript'];
  
  let nodes = langs.map(lang => {
      let li = document.createElement('li');
      li.textContent = lang;
      return li;
  });
  
  app.prepend(...nodes);
  Code language: JavaScript (javascript)

  1 mới với ____3_______5 được gán cho phần tử mảng
• Cuối cùng, thêm các phần tử

  let app = document.querySelector('#app');
  
  let langs = ['CSS','JavaScript','TypeScript'];
  
  let nodes = langs.map(lang => {
      let li = document.createElement('li');
      li.textContent = lang;
      return li;
  });
  
  app.prepend(...nodes);
  Code language: JavaScript (javascript)

  1 vào phần tử cha

  let app = document.querySelector('#app');
  
  let langs = ['CSS','JavaScript','TypeScript'];
  
  let nodes = langs.map(lang => {
      let li = document.createElement('li');
      li.textContent = lang;
      return li;
  });
  
  app.prepend(...nodes);
  Code language: JavaScript (javascript)

  2 bằng cách sử dụng phương thức prepend()

2) Sử dụng phương thức prepend() để thêm văn bản vào ví dụ phần tử

Giả sử rằng bạn có phần tử sau

<div id="app"></div>
Code language: HTML, XML (xml)

Phần sau đây cho thấy cách sử dụng phương pháp prepend() để thêm văn bản vào phần tử

<ul id="app">
    <li>CSS</li>
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
</ul>
Code language: HTML, XML (xml)

prepend và append nghĩa là gì?

prepend() nghĩa là gì trong JavaScript?

Nối thêm trong JavaScript là gì?

Sự khác biệt giữa append prepend và after before là gì?