Tôi nên sử dụng InternalHTML hay createElement?

Trong Hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo các phần tử mới trong JavaScript và cách thêm các loại nội dung khác nhau

1009 lượt xem

Item ${list.children.length + 1}`; 0]

HTML


  Item 1
  Item 2
  Item 3

JavaScript

const list = document.getElementById["list"];

list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;

    Xin lưu ý rằng việc sử dụng

    document.body.innerHTML = "";
    
    3 để nối các phần tử HTML [e. g.
    const list = document.getElementById["list"];
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    2] sẽ dẫn đến việc loại bỏ bất kỳ người nghe sự kiện nào đã đặt trước đó. Nghĩa là, sau khi bạn thêm bất kỳ phần tử HTML nào theo cách đó, bạn sẽ không thể nghe các trình xử lý sự kiện đã đặt trước đó

    Không có gì lạ khi thấy

    document.body.innerHTML = "";
    
    3 được sử dụng để chèn văn bản vào trang web. Điều này có khả năng trở thành phương tiện tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm ẩn

    let name = "John";
    // assuming 'el' is an HTML DOM element
    el.innerHTML = name; // harmless in this case
    
    // …
    
    name = "alert['I am John in an annoying alert!']";
    el.innerHTML = name; // harmless in this case
    

    Mặc dù điều này có vẻ giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng một thẻ

    const list = document.getElementById["list"];
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    4 được chèn với
    document.body.innerHTML = "";
    
    3

    Tuy nhiên, có nhiều cách để thực thi JavaScript mà không cần sử dụng các phần tử

    const list = document.getElementById["list"];
    
    list.innerHTML += `
  • Item ${list.children.length + 1}
  • `
    ;
    4, do đó, vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng
    document.body.innerHTML = "";
    
    3 để đặt các chuỗi mà bạn không kiểm soát được. Ví dụ

    const name = "";
    el.innerHTML = name; // shows the alert
    

    Vì lý do đó, bạn nên sử dụng thay vì

    document.body.innerHTML = "";
    
    3

    • document.documentElement.innerHTML = `
      ${document.documentElement.innerHTML.replace[/

    Chủ Đề