Hướng dẫn cho người mới bắt đầu này sẽ hướng dẫn cách thêm động mã HTML trong Javascript. Tải xuống mã nguồn ví dụ miễn phí bao gồm.

Bạn đang xem : viết html bằng javascript

Chào mừng bạn đến với hướng dẫn ngắn gọn dành cho người mới bắt đầu về cách thêm mã HTML trong Javascript. Vì vậy, cuối cùng bạn đã làm việc với cả HTML và Javascript, nhưng thách thức là bây giờ bạn phải thêm một số HTML vào một trang hiện có.

Thêm mã HTML bằng Javascript thực sự là một quy trình “lấy vùng chứa đích và chèn HTML” đơn giản:

  1. Bằng cách thay đổi hoặc bổ sung trực tiếp vào HTML bên trong.
    • var target = document.getElementById ("ID");
    • target.innerHTML + = "& lt; p & gt; CONTENTS & lt; / p & gt;";
  2. Bằng cách tạo và chèn một phần tử mới.
    • var newElement = document.createElement ("p");
    • newElement.innerHTML = "CONTENTS";
    • document.getElementById ("ID"). appendChild (newElement);

Đúng vậy. Có vẻ đơn giản như cơ chế chèn chọn này có vẻ giống như vậy, thực tế có khá nhiều cách để chọn và chèn các phần tử. Vì vậy, chúng ta hãy xem qua một số ví dụ thực tế trong hướng dẫn này – Đọc tiếp!

ⓘ Tôi đã bao gồm một tệp zip với tất cả mã nguồn mẫu ở đầ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

MỤC LỤC

TẢI XUỐNG & amp; LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã nguồn mẫu như đã hứa.

LƯU Ý NHANH

Nếu bạn phát hiện ra lỗi, vui lòng 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 toàn bộ thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem

Nếu bạn phát hiện lỗi, vui lòng nhận xét bên dưới. Tôi cũng cố gắng trả lời những 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 khẩn cấp, vui lòng xem danh sách các trang web của tôi để nhận trợ giúp về lập trình

TẢI XUỐNG MÃ VÍ DỤ

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành mã nguồn theo giấy phép của MIT, vì vậy hãy thoải mái xây dựng hoặc sử dụng nó trong dự án của riêng bạn.

CÁC CÁCH THÊM MÃ HTML

Được rồi, bây giờ chúng ta hãy chuyển sang các ví dụ thực tế – Cách chúng ta có thể làm việc với Javascript để thêm mã và phần tử HTML.

PHƯƠNG PHÁP 1) THAY ĐỔI TRỰC TIẾP MÃ HTML

1-direct-code.html

  & lt;! - (A) YẾU TỐ MỤC TIÊU - & gt;
& lt; div id = "demo" & gt; Foo Bar! & lt; / div & gt;
 
& lt; script & gt;
window.addEventListener ("tải", () = & gt; {
  // (B) NHẬN YẾU TỐ HTML
  var demo = document.getElementById ("demo");
  console.log (demo);
 
  // (C) ĐIỀU NÀY SẼ THAY THẾ NỘI DUNG
  demo.innerHTML = "John Doe";
 
  // (D) ĐIỀU NÀY SẼ PHỤ THUỘC VÀO NỘI DUNG
  demo.innerHTML + = "is & lt; strong & gt; NOT & lt; / strong & gt; John Wick.";
});
& lt; / script & gt;  

Phương pháp đầu tiên này sẽ sử dụng thuộc tính innerHTML để thao tác trực tiếp với HTML.

  • (A) Đầu tiên, chúng tôi cung cấp cho phần tử HTML một id duy nhất.
  • (B) Sau đó, chọn nó bằng var ELEMENT = document.getElementById (ID) trong Javascript.
  • (C & amp; D) Cuối cùng, hãy lưu ý rằng innerHTML có thể được sử dụng theo hai hướng.
    • var CONTENTS = ELEMENT.innerHTML để nhận nội dung hiện tại.
    • ELEMENT.innerHTML = "FOO!" để thay thế nội dung.
    • ELEMENT.innerHTML + = "FOO!" để thêm vào nội dung hiện có.

PHƯƠNG PHÁP 2) TẠO & amp; PHỤ LỤC CÁC YẾU TỐ HTML

2-create-element.html

 & lt;! - (A) YẾU TỐ MỤC TIÊU - & gt;
& lt; div id = "demo" & gt; John Doe & lt; / div & gt;
 
& lt; script & gt;
window.addEventListener ("tải", () = & gt; {
  // (B) NHẬN YẾU TỐ HTML
  var demoA = document.getElementById ("demo");
 
  // (C) TẠO YẾU TỐ + ĐẶT NỘI DUNG
  var demoB = document.createElement ("strong");
  demoB.innerHTML = "SAYS";
  demoA.appendChild (demoB);
 
  // (D) TẠO SỐ VĂN BẢN MỚI
  var demoC = document.createTextNode ("uvuvwevwevwe onyetenyevwe ugwemubwem ossas");
  demoA.appendChild (demoC);
});
& lt; / script & gt;  

Phương pháp này mang tính “hướng đối tượng” nhiều hơn một chút, tạo các phần tử HTML mới trong Javascript và thêm chúng vào tài liệu.

Xem Thêm  Cách thêm thuộc tính vào đối tượng trong JavaScript - Liên hệ Mentor - thêm thuộc tính vào đối tượng javascript

  • (A & amp; B) Như thường lệ, hãy đặt id cho phần tử HTML. Sau đó, sử dụng var PARENT = document.getElementById ("ID") để lấy.
  • (C) Nhưng thay vì thay thế trực tiếp innerHTML , chúng tôi tạo một phần tử HTML mới.
    • Chúng tôi sử dụng var ELEMENT = document.createElement ("TAG") để tạo thẻ HTML mới.
    • Sau đó, thay đổi nội dung bằng ELEMENT.innerHTML = "FOO" … Cái mà bạn đã biết.
    • Cuối cùng, nối phần tử mới vào phần tử gốc – PARENT.appendChild (ELEMENT) .
  • (D) Nếu bạn chỉ muốn nối văn bản, hãy tạo một nút văn bản thay thế – var TEXT = document.createTextNode ("TEXT") .

LỰA CHỌN HTML THÊM & amp; INSERTION

Cho đến nay tốt như vậy? Dưới đây là một số ví dụ khác về các cách khác nhau để chọn và chèn các phần tử HTML.

NHẬN CÁC PHẦN TỬ HTML TRONG JAVASCRIPT

3-get-element.html

  & lt;! - (A) CÁC YẾU TỐ HTML - & gt;
& lt; div id = "demoA" & gt; Foo Bar! & lt; / div & gt;
& lt; input type = "text" name = "demoB" value = "Hello World!" / & gt;
& lt; span class = "demoC" & gt; Foo Bar! & lt; / span & gt;
& lt; u & gt; DemoD & lt; / u & gt;
& lt; p id = "demoE" & gt;
  John Doe & lt; mạnh & gt; không & lt; / strong & gt; John Wick.
& lt; / p & gt;

& lt; script & gt;
// (B) NHẬN BẰNG ID
var demoA = document.getElementById ("demoA");
console.log (demoA); // & lt; div id = "demoA" & gt;

// (C) NHẬN THEO TÊN
var demoB = document.getElementsByName ("demoB");
console.log (demoB); // danh sách nút - [& lt; input name = "demoB" & gt;]
 
// (D) NHẬN THEO LỚP CSS
var demoC = document.getElementsByClassName ("demoC");
console.log (demoC); // bộ sưu tập html - [& lt; span class = "demoC" & gt;]
 
// (E) NHẬN BẰNG TÊN THẺ
var demoD = document.getElementsByTagName ("u");
console.log (demoD); // bộ sưu tập html - [& lt; u & gt; demoD & lt; / u & gt;]
 
// (F) NHẬN ĐƯỢC BỞI BỘ CHỌN QUERY
var demoE = document.querySelector ("# demoE strong");
console.log (demoE); // & lt; strong & gt; not & lt; / strong & gt;
 
// (G) NHẬN BẰNG BỘ CHỌN QUERY (NHIỀU BỘ CHỌN)
var demoF = document.querySelectorAll ("span.demoC, p # demoE");
console.log (demoF); // danh sách nút - [& lt; span class = "demoC" & gt ;, & lt; p id = "demoE" & gt;]
 
/ * SỬ DỤNG ĐỂ LOOP QUA CÁC BỘ SƯU TẬP + DANH SÁCH
for (let el of element) {console.log (el); }
& lt; / script & gt;  

Lấy các phần tử bằng id không phải là cách duy nhất trong Javascript. Còn rất nhiều điều khác mà bạn cần lưu ý.

Phương pháp
Mô tả
Tham khảo
getElementById (ID)
Nhận phần tử HTML với ID đã cho.
Nhấp vào đây
getElementByName (NAME)
Lấy phần tử HTML với tên đã cho.
Nhấp vào đây
getElementsByClassName (CSS)
Nhận tất cả các phần tử với tên lớp CSS đã cho.
Nhấp vào đây
getElementsByTagName (TAG)
Nhận tất cả các phần tử với tên thẻ đã cho.
Nhấp vào đây
querySelector (QUERY)
Lấy tất cả các phần tử bằng một bộ chọn CSS nhất định.
Nhấp vào đây
querySelectorAll (QUERY, QUERY)
Tương tự như trên, ngoại trừ việc nó có nhiều bộ chọn được phân tách bằng dấu phẩy.
Nhấp vào đây

ĐẶT CÁC THUỘC TÍNH HTML / CSS

4-set-property.html

 & lt;! - (A) DANH SÁCH KHẨN CẤP - & gt;
& lt; ul id = "thelist" & gt; & lt; / ul & gt;
 
& lt; script & gt;
window.addEventListener ("tải", () = & gt; {
  // (A) NHẬN DANH SÁCH HTML
  var ul = document.getElementById ("danh sách");
 
  // (B) DỮ LIỆU
  var data = ["Foo", "Bar", "Hello", "World", "John", "Doe"];
 
  // (C) THÊM MỤC DANH SÁCH
  for (để idx trong dữ liệu) {
    let li = document.createElement ("li");
    li.innerHTML = data [idx];
    li.id = "item-" + idx; // đặt id
    li.style.color = "đỏ"; // thiết lập kiểu
    li.classList.add ("giả"); // thêm lớp css
    ul.appendChild (li);
  }
});
& lt; / script & gt;  

Bạn có nhớ ví dụ “tạo và nối phần tử HTML” không? Có, chúng tôi cũng có thể đặt các thuộc tính HTML / CSS trong Javascript.

Xem Thêm  Văn bản Căn đều HTML - định dạng đoạn html justify

Phương thức / Thuộc tính
Mô tả
Tham khảo
document.createTextNode (TEXT)
Tạo một nút văn bản mới.
Nhấp vào đây
document.createElement (TAG)
Tạo một phần tử HTML mới.
Nhấp vào đây
NODE.id
Lấy hoặc đặt id của một phần tử.
Nhấp vào đây
NODE.classList
Danh sách các lớp CSS mà phần tử có.
Nhấp vào đây
NODE.classList.add (CLASS)
Thêm một lớp CSS mới vào phần tử.

NODE.classList.remove (LỚP)
Xóa một lớp CSS khỏi phần tử.

NODE.classList.toggle (LỚP)
Chuyển đổi lớp CSS trên phần tử.

NODE.style.STYLE
Lấy hoặc đặt một kiểu CSS cụ thể trên phần tử.
Nhấp vào đây
NODE.appendChild (TRẺ)
Nối một phần tử con vào cuối phần tử.
Nhấp vào đây

LƯU Ý THÊM VỀ ĐƠN HÀNG TẢI!

5-load-order.html

  & lt; script & gt;
// (A) JAVASCRIPT ĐƯỢC TẢI TRƯỚC
var demo = document.getElementById ("demo");
console.log (demo); // null - không tìm thấy phần tử
& lt; / script & gt;
 
& lt;! - (B) YẾU TỐ CHỈ ĐƯỢC TẢI SAU KHI CÓ JAVASCRIPT - & gt;
& lt; div id = "demo" & gt; Foo Bar! & lt; / div & gt;  

Cuối cùng, đây là một cạm bẫy phổ biến ở những người mới bắt đầu – Không lưu ý thứ tự tải mọi thứ. Chú ý demo NULL trong ví dụ này như thế nào? & lt; div id = "demo" & gt; chưa được xác định !? Không, Javascript không bị hỏng. Điều đã xảy ra là các tệp HTML tải theo cách từ trên xuống dưới, từ trái sang phải.

& lt; script & gt; được tải trước và chạy trước khi & lt; div id = "demo" & gt; được hiển thị – Đây là cách getElementById ("demo") kết thúc dưới dạng NULL . Để giải quyết vấn đề này, chúng ta có thể sử dụng window.addEventListener ("load") (như trong ví dụ trước) để đợi cửa sổ được tải đầy đủ trước khi tiếp tục với các tập lệnh.

NHỮNG LỢI ÍCH HỮU ÍCH & amp; LIÊN KẾT

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn.

QUẢN LÝ HTML TRỰC TIẾP VÀ TẠO ĐỐI TƯỢNG

Giữa việc thay đổi trực tiếp bằng innerHTML và tạo phần tử createElement () – Cái nào tốt hơn? Cá nhân tôi không có sở thích. Nó chỉ là vấn đề có ý nghĩa hơn trong các tình huống khác nhau.

  • innerHTML hoạt động tốt hơn khi bạn xử lý việc thay đổi nội dung văn bản bên trong một phần tử.
  • createElement () có ý nghĩa hơn khi bạn xử lý danh sách và bảng.

Vậy là được – Bạn quyết định cái nào thoải mái hơn.

CÁC BÀI ĐỌC ĐƯỢC ĐỀ XUẤT

VIDEO HƯỚNG DẪN

BẢNG CHEAT HÌNH ẢNH

HẾT

Cảm ơn bạn đã đọc và chúng ta đã đế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 với dự án của bạn, và nếu bạn muốn chia sẻ bất cứ điều gì 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à viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề viết html bằng javascript

Tự học HTML và code ra cái web đơn giản trong 15 phút

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2021-06-07
  • Đánh giá: 4 ⭐ ( 5057 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như đã hứa với các bạn, mình sẽ dần dần ra mắt các vlog trong series “Trở thành Phun Sờ Nắc sau 3 tiếng”.
    Vlog đầu tiên sẽ hướng dẫn các bạn một ngôn ngữ hết sức cơ bản để xây dựng trang web – HTML (Đọc là Hát Tê Mờ Lờ hoặc Ét Tê Em Eo đều được nhé).
    Tụi mình cũng sẽ code một trang web siêu siêu đơn giản nha.

    Danh sách khoá học của Cybersoft: https://bit.ly/codedao-cyber
    Tư vấn khoá học free Cybersoft: https://fb.com/lophocviet
    Nhớ nói được anh Hoàng giới thiệu để được nhận ưu đãi nhé hihi.

    Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Học xong các bạn có thể xem thêm các phần sau:
    – Học HTML trong 15 phút: https://youtu.be/jSyH0HxKQPY
    – Học CSS trong 15 phút: https://youtu.be/DUwx3IdXupU
    – Học JS trong 15 phút https://youtu.be/watch?v=ZIgDYEZl1VE
    – Kết hợp HTML CSS JS https://youtu.be/watch?v=JL2o5qixOPI
    – Code 4 dự án HTML CSS JS https://youtu.be/watch?v=YtYcYRsODmI

    Timestamp:
    00:00 Bắt đầu vlog
    01:30 Giới thiệu ngôn ngữ HTML
    04:20 Bắt đầu viết code HTML, các tag hiển thị thông tin
    09:40 HTML Form, lấy thông tin từ người dùng
    11:25 Tự code web giới thiệu bản thân
    13:30 Giới thiệu CSS kì sau

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

    html code_cung_code_dao hoc_html_15_phut

outerHTML trong JavaScript và cách lấy hoặc thay thế toàn bộ lệnh HTML của Element

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 5944 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng outerHTML trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính outerHTML để lấy cũng như cách thay thế toàn bộ các lệnh HTML dùng để mô tả Element lẫn các Element con cháu sau

Lập trình web với Visual Studio Code: HTML, CSS, JavaScript

  • Tác giả: www.hieuda.com
  • Đánh giá: 5 ⭐ ( 3840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình web html, css, javascript bằng visual studio code. Cài đặt để lập trình web nhanh nhất bằng live server, emmet trên vscode.

Sử dụng Javascript trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 8723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Javascript trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 2644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM – xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

Bài 03: Cách Nhúng (chèn) JavaScript Vào HTML

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 1079 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng (chèn) JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

Javascript là gì? Tổng quan về JavaScript bạn cần biết

  • Tác giả: newnet.vn
  • Đánh giá: 4 ⭐ ( 8990 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu tổng quan về JavaScript, JavaScript là gì? JavaScript có vai trò gì trong thiết kế website? Sử dụng JavaScript thì có những ưu điểm nào vượt trội không? Hãy cùng Newnet tìm hiểu nhé!

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tạo kiểu bằng cách sử dụng các thuộc tính ngôn ngữ - thuộc tính lang trong css

By ads_php