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)5. Lưu ý rằng một DOMString là một chuỗi UTF-16 ánh xạ trực tiếp tới một chuỗiPhương thức prepend() trả về
<ul id="app"> <li>HTML</li> </ul>
Code language: HTML, XML (xml)8Cá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)0 sau<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)1 và thêm chúng vào 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)2let 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
________số 8_______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ử chalet 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)0 ở trên