Tạo tệp HTML bằng chức năng JavaScript

Đặt tập lệnh ở dưới cùng của phần tử sẽ cải thiện tốc độ hiển thị, vì việc giải thích tập lệnh làm chậm màn hình

---

JavaScript bên ngoài

Tập lệnh cũng có thể được đặt trong các tệp bên ngoài

tệp bên ngoài. myScript. js

hàm myFunction() {
tài liệu. getElementById("bản trình diễn"). innerHTML = "Đoạn đã thay đổi. “;
}

Tập lệnh bên ngoài là thực tế khi cùng một mã được sử dụng trong nhiều trang web khác nhau

Các tệp JavaScript có phần mở rộng tệp. js

Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src (nguồn) của


ví dụ

Viết một số văn bản trực tiếp vào đầu ra HTML

tài liệu. write("Xin chào thế giới. ");

Tự mình thử »

Viết một số phần tử HTML trực tiếp vào đầu ra HTML

tài liệu. viết("

Chào thế giới

Chúc một ngày tốt lành

");Tự mình thử »

Sử dụng tài liệu. write() sau khi tài liệu được tải, xóa tất cả HTML hiện có

// Điều này nên tránh
hàm myFunction() {
tài liệu. write("Xin chào thế giới. ");
}

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Phương thức write() ghi trực tiếp vào luồng tài liệu mở (HTML)

Cảnh báo

Phương thức write() xóa tất cả HTML hiện có khi được sử dụng trên tài liệu đã tải

Không thể sử dụng phương thức write() trong XHTML hoặc XML

---

cú pháp

tài liệu. viết (exp1, exp2,. , expN)

Thông số

Tham sốDescriptionexp1,. Không bắt buộc
luồng đầu ra
Nhiều đối số được thêm vào tài liệu theo thứ tự xuất hiện

Giá trị trả về

---

Thêm ví dụ

Mở luồng đầu ra, thêm một số HTML, sau đó đóng luồng đầu ra

tài liệu. mở ra();
tài liệu. viết("

Chào thế giới");
tài liệu. close();Tự mình thử »

Mở một cửa sổ mới và viết một số HTML vào đó

const myWindow = cửa sổ. mở ra();
cửa sổ của tôi. tài liệu. viết("

Cửa sổ mới");
cửa sổ của tôi. tài liệu. viết("

Chào thế giới

");Tự mình thử »

---

Sự khác biệt giữa write() và writeln()

Phương thức writeln() chỉ hữu ích khi ghi vào tài liệu văn bản (type=". txt")

Thí dụ

tài liệu. write("Xin chào thế giới. ");
tài liệu. write("Chúc một ngày tốt lành. ");
tài liệu. viết("
");
tài liệu. writeln("Xin chào thế giới. ");
tài liệu. writeln("Chúc một ngày tốt lành. ");

Tự mình thử »

Ghi chú

Thật vô nghĩa khi sử dụng writeln() trong HTML

Nó chỉ hữu ích khi ghi vào tài liệu văn bản (type=". txt")

Các ký tự dòng mới bị bỏ qua trong HTML

Nếu bạn muốn các dòng mới trong HTML, bạn phải sử dụng các đoạn văn hoặc
:

ví dụ

tài liệu. write("Xin chào thế giới. ");
tài liệu. viết("
");
tài liệu. write("Chúc một ngày tốt lành. ");

Tự mình thử »

tài liệu. viết("

Chào thế giới

");
tài liệu. viết("

Chúc một ngày tốt lành

");Tự mình thử »

---

Hỗ trợ trình duyệt

document.write được hỗ trợ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCóCó

createElement() là một phương thức tích hợp đối tượng tài liệu có chức năng tự động tạo một phần tử HTML từ và trả về phần tử HTML mới được tạo

Cú pháp của createElement() được đưa ra dưới đây

var createdElement = . createElement( HTMLTagName );

createElement() nhận một tham số HTMLTagName là tham số bắt buộc của kiểu chuỗi và nó là tên thẻ của phần tử HTML

Cần lưu ý rằng phương thức createElement() có tạo một phần tử HTML tuy nhiên để gắn phần tử đó vào tài liệu (trang web) chúng ta phải sử dụng các phương thức appendChild() hoặc insertB Before()

Bây giờ chúng ta đã biết phương thức createElement() là gì, chúng ta hãy xem một ví dụ để hiểu rõ hơn về phương thức createElement()

Ví dụ 1

Trong ví dụ này, chúng tôi sẽ tạo một phần tử nút từ JavaScript bằng cách nhấp vào nút đã tồn tại

Trước tiên hãy tạo một nút trong HTML có gắn sự kiện onclick với nó

< nội dung >

< khi nhấp vào nút = "myFunc()">Magic Buttonbutton>

< script src ="mã. js"> tập lệnh >

cơ thể>body>

Bất cứ khi nào người dùng nhấp vào nút, nó sẽ bắt đầu thực thi chức năng myFunc(). Cuối cùng, chúng tôi đã sử dụng thẻ script và cung cấp nguồn (mã. js) của tệp JavaScript chứa hàm myFunc()

Mã JavaScript được đưa ra dưới đây

function myFunc () {

var myBtn = tài liệu. createElement("nút");

myBtn. innerHTML = "Nút mới";

tài liệu. cơ thể . appendChild( myBtn );

}

Trong đoạn mã trên, đầu tiên, chúng ta đã khởi tạo hàm myFunc() và sau đó tạo một phần tử nút bằng phương thức createElement(). Sau đó, để đặt tiêu đề cho nút, chúng tôi đã sử dụng myBtn. thuộc tính bên trongHTML. Cuối cùng, chúng tôi đã đính kèm nút vào phần thân của HTML bằng phương thức appendChild()

Đầu ra được đưa ra dưới đây

Chúng ta có thể thấy rằng bất cứ khi nào chúng ta nhấp vào nút Magic, nó sẽ tạo ra một nút mới với tiêu đề “New Button”

Ví dụ2

Trong ví dụ này, chúng ta sẽ tạo một thẻ h2 của HTML thông qua javascript và sau đó đính kèm nó với phần thân HTML bằng phương thức insertB Before()

Với mục đích này, trước tiên chúng ta hãy viết mã HTML

< nội dung >

< div id ="myContainer"><

< p id = "para"><Insert Heading above thisp>

div>div>

< khi nhấp vào nút = "myFunc()">Magic Buttonbutton>

< script src ="mã. js"> tập lệnh >

cơ thể>body>

The rest of the code is the same as example 1 with the exception that now we have created a div element inside which we created a

tag with the id “para”.

Mã JavaScript được đưa ra dưới đây

function myFunc () {

var myContainer = . getElementById("myContainer");

var para = tài liệu. getElementById("para");

var myHeading = tài liệu. createElement("h2");

tiêu đề của tôi. innerHTML = "Tiêu đề mới";

myContainer. insert Before( myHeading , para );

}

Inside the function, we first get the reference of the