Bạn cũng có thể tạo một tập lệnh đơn giản để sửa đổi nội dung của tiêu đề trong trang web [hoặc bất kỳ thành phần nào, đối với vấn đề đó]. Như bạn đã học trước đó trong chương này, thuộc tính nodeValue của một nút văn bản chứa văn bản thực của nó và nút văn bản cho một tiêu đề là con của tiêu đề đó. Do đó, cú pháp để thay đổi văn bản của một tiêu đề với định danh head1 sẽ là
var heading1 = document.getElementById["heading1"]; heading1.firstChild.nodeValue = "New Text Here";
Điều này gán đối tượng của tiêu đề cho biến có tên là tiêu đề1. Thuộc tính firstChild trả về nút văn bản là nút con duy nhất của tiêu đề và thuộc tính nodeValue của nó chứa văn bản tiêu đề
Sử dụng kỹ thuật này, thật dễ dàng để tạo một trang cho phép thay đổi tiêu đề một cách linh hoạt. Liệt kê 6. 8 hiển thị tài liệu HTML hoàn chỉnh cho tập lệnh thực hiện điều đó
DANH SÁCH 6. 8 Ví dụ sửa đổi văn bản hoàn chỉnh
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
Ví dụ này xác định một biểu mẫu cho phép người dùng nhập tiêu đề mới cho trang. Nhấp vào nút sẽ gọi hàm changeTitle[], được định nghĩa trong
Đây là cách đơn giản nhất để tự động sửa đổi nội dung- sử dụng thuộc tính
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
7. Bằng cách sử dụng thuộc tính này, được hỗ trợ trong tất cả các trình duyệt hiện đại, chúng tôi có thể gán HTML hoặc văn bản mới cho bất kỳ phần tử ngăn chặn nào [chẳng hạn nhưhoặc ], và trang được cập nhật và chỉnh lại dòng ngay lập tức để hiển thị nội dung mới. Dưới đây là các thuộc tính nội dung động
Thuộc tính nội dung động bên trongHTMLNội dung đầy đủ [bao gồm các thẻ HTML, nếu có] của một phần tử. Được hỗ trợ trong tất cả các trình duyệt. InternalTextNội dung văn bản hoàn chỉnh của một phần tử. Không chuẩn, chỉ được hỗ trợ trong IE. textContentTương tự như thuộc tính
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
8 độc quyền của IE ở trên,
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
9 nhận hoặc đặt nội dung văn bản của một phần tử. Nó khác với
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
8 ở những điểm sau
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
9 lấy nội dung của tất cả các phần tử, bao gồm cả
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
window.addEventListener["load", [] => {
// [B1] REPLACE THE ENTIRE ELEMENT WITH
var first = document.getElementById["first"];
first.outerHTML = "FOO BAR!";
// [B2] WILL STILL BE A , BUT CONTENT WILL BE CHANGED.
var second = document.getElementById["second"];
second.innerHTML = "FOO BAR";
}];
2 để kích hoạt chức năng
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
window.addEventListener["load", [] => {
// [B1] REPLACE THE ENTIRE ELEMENT WITH
var first = document.getElementById["first"];
first.outerHTML = "FOO BAR!";
// [B2] WILL STILL BE A , BUT CONTENT WILL BE CHANGED.
var second = document.getElementById["second"];
second.innerHTML = "FOO BAR";
}];
3 Chào mừng bạn đến với hướng dẫn về cách hiển thị nội dung HTML động trong Javascript. Vâng, thời kỳ đồ đá của Internet đã qua lâu và chúng ta hiện đang sống trong thời đại của các trang HTML không tĩnh. Có thể làm mới giỏ hàng sau khi thêm một mặt hàng, tải thêm nội dung hoặc cập nhật một phần của trang
Có một số cách để thao tác động nội dung HTML bằng Javascript
- Trực tiếp thay đổi nội dung với
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
7 và
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
0- Tạo các phần tử HTML mới và chèn chúng
- Tải và chèn nội dung HTML bằng AJAX
- Tải dữ liệu bằng AJAX và tạo bảng hoặc danh sách
- Tự động tải các tệp CSS
Nhưng làm thế nào để mỗi phương pháp hoạt động chính xác?
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn
NỘI DUNG ĐỘNG VỚI JAVASCRIPT
Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về thao tác với nội dung HTML động trong Javascript
1] THAY ĐỔI NỘI DUNG BẰNG INNERHTML và OUTERHTML
1-trong-ngoài-html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus semper eleifend lectus, sed faucibus massa cursus a.
window.addEventListener["load", [] => {
// [B1] REPLACE THE ENTIRE ELEMENT WITH
var first = document.getElementById["first"];
first.outerHTML = "FOO BAR!";
// [B2] WILL STILL BE A , BUT CONTENT WILL BE CHANGED.
var second = document.getElementById["second"];
second.innerHTML = "FOO BAR";
}];
Vậy thuộc tính
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
7 và
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
0 là gì? - ____27 đề cập đến nội dung của phần tử đã cho
- __
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
0 đề cập đến toàn bộ phần tử
2] TẠO THÀNH PHẦN HTML và CHÈN
2-tạo. html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
Đây là một cách xử lý “hướng đối tượng” với các phần tử HTML
- Tạo một phần tử mới –
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
5- Đặt nội dung –
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
6- Nối nó –
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
7
3] NỘI DUNG TẢI AJAX
3A-AJAX. html
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
0nội dung 3B. html
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
1Dành cho các bạn chưa từng nghe đến AJAX, nó là chữ viết tắt của “Asynchronous Javascript And XML”. Theo thuật ngữ của giáo dân, tải nội dung và dữ liệu mà không cần làm mới toàn bộ trang. Rất hữu ích – Chúng tôi có thể sử dụng nó để gửi dữ liệu đến máy chủ, lấy dữ liệu từ máy chủ hoặc thậm chí tải thêm nội dung
P. S. Hãy lưu ý rằng AJAX sẽ chỉ hoạt động với
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
8, không phải với
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
9
4] AJAX TẢI DỮ LIỆU VÀ TẠO BẢNG/DANH SÁCH
4A-AJAX-JSON. html
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
44B-hình nộm. json
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
5Đây là phần tiếp theo của ví dụ AJAX trước đó – Có, chúng ta có thể phân tích cú pháp một mảng dữ liệu JSON từ máy chủ và tạo một bảng hoặc danh sách với nó. Tôi sẽ không xử lý phía máy chủ vì nó nằm ngoài phạm vi của hướng dẫn này – Hãy đọc hướng dẫn khác của tôi về PHP JSON nếu bạn quan tâm
5] TẢI TỆP CSS ĐỘNG
5A-tải-css. html
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
6kiểu 5B. css
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
7Hãy nhớ rằng chúng ta có thể tạo các thẻ HTML từ trước đó?
BIT & LIÊN KẾT HỮU ÍCH
Đó là tất cả các ví dụ và đây là một số tính năng bổ sung nhỏ có thể hữu ích
TÓM TẮT
CHỨC NĂNG VÀ TÍNH CHẤT
Chức năng/thuộc tính Mô tả Liên kết tham khảo_______102Nhận/đặt InternalHTML của phần tử. Nhấp vào đây
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
03Nhận/đặt HTML của toàn bộ phần tử. Bấm vào đây
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
04Tạo một phần tử HTML mới. Bấm vào đây
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
05Thêm một phần tử mới vào vùng chứa. Bấm vào đâyTÌM KIẾM AJAX
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
window.addEventListener["load", [] => {
// [B1] CREATE NEW HTML ELEMENT
var element = document.createElement["strong"];
element.innerHTML = "FOO BAR!";
// [B2] ATTACH TO
document.getElementById["first"].appendChild[element];
// [B3] TO ATTACH NEW ELEMENT TO
element = document.createElement["p"];
element.innerHTML = "Lorem ipsum dolor sit amet.";
document.body.appendChild[element];
}];
4P. S. Nếu bạn cần tìm nạp từ một trang web khác [tên miền chéo] – Có thể, nhưng cần phải thực hiện một số cài đặt Chia sẻ tài nguyên nguồn gốc chéo [CORS]. Hãy xem hướng dẫn tìm nạp CORS khác của tôi
JSON
FunctionDescription
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
06Giải mã chuỗi JSON đã cung cấp thành mảng/đối tượng.
Dynamic Text in JavaScript
Dynamic Text in JavaScript
Using the W3C DOM, you can dynamically change the
heading at the top of this page.
Enter a new title and click the Change! button.
Change!
07Mã hóa mảng/đối tượng đã cho thành chuỗi JSON
VIDEO HƯỚNG DẪN
BẢNG CHEAT INFOGRAPHIC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn tạo một trang HTML động tốt hơn và nếu bạn có bất cứ điều gì muốn chia sẻ với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc
Văn bản động là gì?
Văn bản động là văn bản trên bố cục thay đổi dựa trên các thuộc tính hiện tại của dự án, khung bản đồ, bản đồ, v.v. .
Làm cách nào để sử dụng văn bản động trong HTML?
Trong trình chỉnh sửa bố cục, chọn thành phần văn bản động. Trên Trình chỉnh sửa thuộc tính, chọn tab Thuộc tính. Trình chỉnh sửa thuộc tính hiển thị các thuộc tính của thành phần văn bản động. Chọn giá trị này nếu bạn không biết định dạng của nội dung trường
Mục đích của việc sử dụng văn bản động là gì?
Sử dụng văn bản động giúp tạo bản sao quảng cáo có liên quan hơn và điều chỉnh quảng cáo cho phù hợp với cụm từ tìm kiếm thực tế của người dùng . Điều này có thể giúp bạn nhận được nhiều nhấp chuột và chuyển đổi hơn.
Văn bản động trong hoạt hình là gì?
Văn bản động là phần tử văn bản trên màn hình dành cho hoạt ảnh hiển thị các thuộc tính về bản đồ . Văn bản trên màn hình thay đổi dựa trên các thuộc tính trong khi phát lại hoạt ảnh. Các loại cài đặt trước văn bản động sau đây có sẵn cho hoạt ảnh. Thời gian bản đồ.
Chủ Đề