Hướng dẫn how do you add html in javascript? - làm thế nào để bạn thêm html trong javascript?

Chào mừng bạn đến với một hướng dẫn ngắn của 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 đã đến mức 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 cách sử dụng JavaScript thực sự là một bộ chứa mục tiêu đơn giản và chèn quá trình HTML HTML:

1. Bằng cách thay đổi trực tiếp hoặc nối vào HTML bên trong.
   • var target = document.getElementById("ID");
   • target.innerHTML += "

     CONTENTS

     ";
2. Bằng cách tạo và chèn một yếu tố mới.
   • var newElement = document.createElement("p");
   • newElement.innerHTML = "CONTENTS";
   • document.getElementById("ID").appendChild(newElement);

Chuẩn rồi. Đơn giản như cơ chế chọn lọc này có vẻ như, thực sự có khá nhiều cách để chọn và chèn các yếu tố. Vì vậy, chúng ta hãy đi 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ả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.

Slide nhanh

MỤC LỤC

Tải xuống & ghi chú

Đầu tiên, đây là liên kết tải xuống đến mã nguồn 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 toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn 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 đó hoặc sử dụng nó trong dự án của riêng bạn.

Được rồi, bây giờ chúng ta hãy tự di chuyển vào 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

Foo Bar!
 

Phương pháp đầu tiên này sẽ sử dụng thuộc tính

John Doe
 

• (A) Đầu tiên, chúng tôi cung cấp cho phần tử HTML một

  
  John Doe
   
  

  1 duy nhất. First, we give the HTML element a unique

  
  John Doe
   
  

  1.
• (B) Sau đó chọn nó với

  
  John Doe
   
  

  2 trong JavaScript. Then select it with

  
  John Doe
   
  

  2 in Javascript.
• (C & D) Cuối cùng, hãy lưu ý rằng

  
  John Doe
   
  

  0 có thể được sử dụng theo hai hướng. Finally, take note that

  
  John Doe
   
  

  0 can be used in two directions.

  • 
    John Doe
     
    

    4 để có được nội dung hiện tại.

  • 
    John Doe
     
    

    5 để thay thế nội dung.

  • 
    John Doe
     
    

    6 để nối vào các nội dung hiện có.

Phương pháp 2) Tạo và nối các phần tử HTML

2-create-element.html

John Doe
 

Phương pháp này là một chút định hướng đối tượng của người Viking, tạo ra các phần tử HTML mới trong JavaScript và thêm chúng vào tài liệu.

• (A & B) Như thường lệ, cho phần tử HTML một

  
  John Doe
   
  

  1. Sau đó sử dụng

  
  John Doe
   
  

  8 để có được nó. As usual, give the HTML element an

  
  John Doe
   
  

  1. Then use

  
  John Doe
   
  

  8 to get it.
• (C) Nhưng thay vì thay thế trực tiếp

  
  John Doe
   
  

  0, chúng tôi tạo ra một phần tử HTML mới thay thế. But instead of directly replacing the

  
  John Doe
   
  

  0, we create a new HTML element instead.
  • Chúng tôi sử dụng

    
    Foo Bar!
    
    Foo Bar!
    DemoD
    
      John Doe is not John Wick.
    
    
    

    0 để tạo thẻ HTML mới.
  • Sau đó thay đổi nội dung bằng cách sử dụng ____ ____ 21 mà bạn đã biết.
  • Cuối cùng, hãy nối phần tử mới vào cha mẹ -

    
    Foo Bar!
    
    Foo Bar!
    DemoD
    
      John Doe is not John Wick.
    
    
    

    2.
• (D) Nếu bạn chỉ muốn nối thêm văn bản, hãy tạo một nút văn bản thay thế -

  
  Foo Bar!
  
  Foo Bar!
  DemoD
  
    John Doe is not John Wick.
  
  
  

  3. If you just want to append text, create a text node instead –

  
  Foo Bar!
  
  Foo Bar!
  DemoD
  
    John Doe is not John Wick.
  
  
  

  3.

Thêm lựa chọn và chèn HTML

Càng xa càng tốt? Dưới đây là một vài 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

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Nhận các phần tử theo ID không phải là cách duy nhất trong JavaScript. Có rất nhiều điều mà bạn nên lưu ý.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar! DemoD

John Doe is not John Wick.

5

4-set-properties.html

Nhận phần tử HTML với tên đã cho.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Foo Bar!

Foo Bar! DemoD

John Doe is not John Wick.

5

5-load-order.html

 

Foo Bar!

Nhận phần tử HTML với tên đã cho.

Foo Bar!

Foo Bar!
DemoD

  John Doe is not John Wick.

Thao tác HTML trực tiếp so với tạo đối tượng

Giữa việc thay đổi trực tiếp với

John Doe
 

 

Foo Bar!

• 
  John Doe
   
  

  0 hoạt động tốt hơn khi bạn đang xử lý việc thay đổi nội dung văn bản bên trong một phần tử duy nhất.

• 
   
  
  Foo Bar!

  8 có ý nghĩa hơn khi bạn đang xử lý danh sách và bảng.

Vì vậy, Yep - tùy thuộc vào bạn để quyết định cái nào thoải mái hơn.

Đề xuất đọc

• Người mới bắt đầu gỡ lỗi JavaScript - mã Boxx

Video hướng dẫn

Bảng gian lận infographic

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối 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, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!