Hướng dẫn create html file by javascript - tạo tệp html bằng javascript

Question

2

Nội dung chính Show

Thông số
Giá trị trả về
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Bạn có thể tạo một tệp HTML với JavaScript không?
Làm cách nào để tạo tệp HTML?
Làm cách nào để thêm tệp JavaScript vào HTML?
Tôi đặt JavaScript ở đâu trong tệp HTML?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang sử dụng trang web-scraper npm cho cạp một trang web, https://github.com/website-scraper/node-website-scraper

Tôi đã có những hình ảnh từ trang web được lưu trong thư mục Assests. Bây giờ tôi cần hiển thị các hình ảnh trong một HTML động mới mà tập lệnh này cần tạo và hiển thị hình ảnh này. Tôi đã thấy bài đăng này: Tạo tệp HTML với JavaScript nhưng dường như nó không giúp ích gì.

Làm cách nào để tạo HTML chỉ bằng JavaScript? Tạo một tệp HTML thực và lưu nó cục bộ. Hay tôi nên sử dụng nodejs? Chuyển hình ảnh cho phía máy chủ và gắn hình ảnh vào HBS? Sự lựa chọn khác?

Hỏi ngày 25 tháng 10 năm 2018 lúc 10:12Oct 25, 2018 at 10:12

Bạn có thể sử dụng API FileSystem để viết bất cứ điều gì bạn muốn vào bất kỳ tệp nào. Bạn sẽ tạo một chuỗi HTML bằng bất kỳ phương thức nào bạn muốn (ví dụ như nối chuỗi hoặc sử dụng các mẫu UnderCore.js) và sau đó ghi nó vào bất kỳ tệp nào bằng API hệ thống tập tin Node.js.

var fs = require('fs');

var htmlContent = '<html>Whatever</html>';

fs.writeFile('/my-page.html', htmlContent, (error) => { /* handle error */ });

ph0enix

7542 Huy hiệu vàng8 Huy hiệu bạc22 Huy hiệu đồng2 gold badges8 silver badges22 bronze badges

Đã trả lời ngày 25 tháng 10 năm 2018 lúc 10:21Oct 25, 2018 at 10:21

Denis Pshenovdenis PshenovDenis Pshenov

10,9k6 huy hiệu vàng40 Huy hiệu bạc41 Huy hiệu đồng6 gold badges40 silver badges41 bronze badges

Phương pháp DOMImplementation.createHTMLDocument() tạo ra một HTML Document mới.DOMImplementation.createHTMLDocument() method creates a new HTML Document.

Cú pháp

createHTMLDocument()
createHTMLDocument(title)

Thông số

title Tùy chọnOptional

Một chuỗi chứa tiêu đề để cung cấp tài liệu HTML mới.

Giá trị trả về

Một đối tượng HTML Document mới.

Ví dụ

Ví dụ này tạo ra một tài liệu HTML mới và chèn nó vào <iframe> trong tài liệu hiện tại.

Đây là HTML cho ví dụ này:

<body>
  <p>
    Click <a href="javascript:makeDocument()">here</a> to create a new document
    and insert it below.
  </p>
  <iframe id="theFrame" src="about:blank" />
</body>

Việc triển khai JavaScript của

createHTMLDocument()
createHTMLDocument(title)

0 sau:

function makeDocument() {
  let frame = document.getElementById("theFrame");

  let doc = document.implementation.createHTMLDocument("New Document");
  let p = doc.createElement("p");
  p.textContent = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch (e) {
    console.log(e);
  }

  // Copy the new HTML document into the frame

  let destDocument = frame.contentDocument;
  let srcNode = doc.documentElement;
  let newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}

Mã trong các dòng 4 Tay12 Xử lý tạo tài liệu HTML mới và chèn một số nội dung vào đó. Dòng 4 sử dụng

createHTMLDocument()
createHTMLDocument(title)

1 để xây dựng một tài liệu HTML mới có

createHTMLDocument()
createHTMLDocument(title)

2 là

createHTMLDocument()
createHTMLDocument(title)

3. Các dòng 5 và 6 tạo ra một yếu tố đoạn văn mới với một số nội dung đơn giản, sau đó dòng 8 Ném12 xử lý chèn đoạn mới vào tài liệu mới.

Dòng 16 kéo

createHTMLDocument()
createHTMLDocument(title)

4 của khung; Đây là tài liệu mà chúng tôi sẽ tiêm nội dung mới. Hai dòng tiếp theo xử lý nhập nội dung của tài liệu mới của chúng tôi vào bối cảnh của tài liệu mới. Cuối cùng, dòng 20 thực sự thay thế nội dung của khung bằng nội dung của tài liệu mới.

Xem ví dụ trực tiếp

Tài liệu được trả lại được xây dựng sẵn với HTML sau:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
  </head>
  <body>
    …
  </body>
</html>

Thông số kỹ thuật

Sự chỉ rõ
DOM Standard # ref-for-dom-Domplementation-createhtmldocument① # ref-for-dom-domimplementation-createhtmldocument①

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Giao diện

createHTMLDocument()
createHTMLDocument(title)

5 thuộc về.

Bạn có thể tạo một tệp HTML với JavaScript không?

Bạn có thể thêm HTML vào một tài liệu mới được tạo giống như cách bạn thường làm: bằng cách sử dụng các phương thức như append (), appendChild () và các phương thức JavaScript liên quan đến DOM khác.Trong mã ở trên, một tài liệu HTML mới được tạo bằng phương thức createHtMldocument () của giao diện mô hình hóa và thế giới Hello!by using methods such as append() , appendChild() , and other DOM-related JavaScript methods. In the code above, a new HTML document is created using the createHTMLDocument() method of the DOMImplementation interface and the Hello World!