Làm thế nào để bạn xác định innerhtml?

Phạm vi

• Trong bài viết này, chúng ta sẽ biết cách thay đổi văn bản hoặc HTML xuất hiện trên trang để làm cho trang web của chúng ta tương tác hơn
• Ở đây, chúng ta cũng sẽ tập trung vào InternalHTML, cú pháp của InternalText, các ngoại lệ và cách sử dụng

JavaScript bên trongHTML là gì?

Khi bạn nhìn vào bàn phím của mình, bạn sẽ thấy rằng có các phím khác nhau và nhãn tương ứng trên chúng. Nói rằng một chìa khóa cần phải được thay đổi, bạn sẽ làm gì?

Sự định nghĩa

innerHTML là một thuộc tính được liên kết với một phần tử HTML, nó được sử dụng để thêm nội dung HTML vào một phần tử HTML cũng như để lấy nội dung HTML có trong một phần tử Lưu ý. InternalHTML áp dụng cho cả nội dung HTML và XML mặc dù chỉ có HTML trong tên của nó

Lấy đi

InternalHTML được sử dụng để sửa đổi nội dung HTML bên trong một phần tử

Văn bản bên trong JavaScript là gì?

Trong ví dụ bàn phím đưa ra ở trên, giả sử nhãn trên bàn phím bị mờ, bạn sẽ xóa toàn bộ phím hay chỉ dán nhãn mới là đủ?

Sự định nghĩa. InternalText là một thuộc tính được liên kết với một phần tử HTML, nó được sử dụng để thêm nội dung văn bản vào một phần tử cũng như để lấy nội dung văn bản có trong một phần tử

Lấy đi. InternalText được sử dụng để sửa đổi nội dung văn bản bên trong một phần tử

cú pháp

1. Đặt nội dung HTML bên trong một phần tử

InternalHTML có thể được sử dụng để đặt nội dung bên trong một phần tử như sau

sample_Element.innerHTML = newHTML;
Ở đây newHTML là một chuỗi HTML bao gồm các phần tử và nội dung của chúng, bằng cách sử dụng InternalHTML, giờ đây chúng ta đã đặt nó bên trong sample_Element
Thí dụ
HTML


  
    
    
    
  
  
    

      
    

    
  

JS
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
đầu ra
Computer Science is no more about computers than astronomy is about telescopes.
Giải trình
Ở đây chúng tôi đã thêm
phần tử và nội dung của nó bên trong div với lớp dưới dạng vùng chứa bằng cách sử dụng InternalHTML và nội dung tương tự được hiển thị trên trang web
2. Lấy nội dung HTML bên trong một phần tử
innerHTML trả về nội dung bên trong một phần tử như sau
let element_Content = sample_Element.innerHTML;
Sử dụng InternalHTML trên sample_Element i. e sample_Element. InternalHTML sẽ cung cấp cho chúng ta nội dung html có trong sample_element và nó được lưu trữ trong biến htmlContent
Thí dụ
HTML


  
    
    
    replit
    
  
  
    

      
 Computer Science is no more about computers than astronomy is about telescopes. 
    

    
    
  

JS
const containerElem = document.querySelector[".container"]

let elemContent = containerElem.innerHTML
console.log[elemContent]
Đầu ra bảng điều khiển
 Computer Science is no more about computers than astronomy is about telescopes. 
Giải trình
Div với lớp dưới dạng vùng chứa có
phần tử bên trong nó và phần tử tương tự được trả về khi chúng tôi sử dụng InternalHTML và điều khiển giá trị bên trong elemContent
Lấy đi

  

Yếu tố. InternalHTML là cú pháp để sử dụng InternalHTML. Nó có thể được sử dụng để lấy hoặc đặt nội dung tùy thuộc vào phía nào của toán tử đẳng thức mà nó được sử dụng
Giá trị
Một điều quan trọng cần lưu ý là giá trị/nội dung của một phần tử thay đổi như thế nào khi chúng ta sử dụng InternalHTML
Điều xảy ra là tất cả HTML có trong phần tử bị xóa và nó được thay thế bằng phần tử chúng tôi đặt bằng cách sử dụng InternalHTML
Bạn có thể tưởng tượng nó giống như viết trên bảng, chúng tôi xóa mọi thứ đã viết và bắt đầu lại
Cách duy nhất để tránh điều này là nối thêm chuỗi HTML mà chúng ta muốn vào nội dung HTML đã có trong phần tử bằng cách sử dụng toán tử +
Thí dụ
Thay vì,
________số 8
chúng ta có thể làm,
   sample_Element.innerHTML += newHTML
Thí dụ
Trong ví dụ trên, bên dưới 'Đặt nội dung HTML bên trong một phần tử', chúng tôi đã thêm
phần tử bên trong div, bây giờ chúng ta hãy thử thêm nhiều nội dung HTML hơn vào đó bằng cách sử dụng InternalHTML làm sample_Element. cú pháp bên trongHTML = newHTML
HTML


  
    
    
    replit
    
  
  
    

      
 Computer Science is no more about computers than astronomy is about telescopes. 
    

    
    
  

JS


  
    
    
    
  
  
    

      
    

    
  

1
đầu ra


  
    
    
    
  
  
    

      
    

    
  

2
Giải trình
Như bạn có thể thấy nội dung HTML hiện có bên trong div đã được thay thế, bây giờ chúng ta hãy thử sử dụng innerHTML và toán tử + làm sample_Element. InternalHTML += newHTML
JS


  
    
    
    
  
  
    

      
    

    
  

3
đầu ra


  
    
    
    
  
  
    

      
    

    
  

4
Giải trình
Điều này hoạt động vì chuỗi HTML mới đã được nối với chuỗi hiện có bên trong vùng chứa div
Lấy đi
Khi sử dụng InternalHTML, nội dung bên trong phần tử sẽ được thay thế bằng nội dung mới trừ khi chúng tôi sử dụng + để nối thêm

ngoại lệ

Có hai loại ngoại lệ có thể xảy ra khi sử dụng InternalHTML tùy thuộc vào loại lỗi nào đã xảy ra khi viết mã

1. Lỗi cú pháp

Ngoại lệ này được đưa ra khi chuỗi html được sử dụng để đặt giá trị của InternalHTML không được định dạng tốt

Thí dụ

HTML

  
    
    
    replit
    
  
  
    

      
 Computer Science is no more about computers than astronomy is about telescopes. 
    

  


    
    
  

JS


  
    
    
    
  
  
    

      
    

    
  

6
Đầu ra bảng điều khiển


  
    
    
    
  
  
    

      
    

    
  

7
Giải trình
InternalHTML đưa ra lỗi ở đây vì chúng tôi đã sử dụng một chuỗi không đúng định dạng, chúng tôi đã sử dụng lại dấu ngoặc kép cho máy tính ["máy tính"] trình biên dịch cho rằng dấu ngoặc kép mở đầu cho từ này [từ ở chữ c] là dấu ngoặc kép kết thúc cho từ 
] và khi gặp lại dấu nháy kép ở cuối từ này [sau chữ s] thì đây được coi là dấu nháy kép mở đầu và dấu nháy kép ở cuối dòng [sau
] được coi là dấu ngoặc kép đóng của nó có nghĩa là từ 'máy tính' không phải là một phần của chuỗi và được trình biên dịch coi là không xác định. Do đó, nó ném lỗi SyntaxError. số nhận dạng không mong muốn
Ngoại lệ này được ném ra khi cha của một phần tử là phần tử tài liệu và chúng tôi cố gắng thay đổi nội dung của phần tử bằng cách sử dụng InternalHTML
Lấy đi
Hai loại ngoại lệ có thể phát sinh khi sử dụng InternalHTML- SyntaxError và NoModificationAllowedError

Cách sử dụng InternalHTML

a. Đọc nội dung HTML của một phần tử bằng cách sử dụng InternalHTML

InternalHTML có thể được sử dụng để đọc HTML của một phần tử, cú pháp của nó như sau

  
    
    
    
  
  
    

      
    

    
  

8
Ở đây, InternalHTML trả về tất cả các nút có trong sample_Element và chúng được lưu trữ bên trong nội dung biến
Thí dụ
HTML


  
    
    
    
  
  
    

      
    

    
  

9
JS
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
0
Đầu ra bảng điều khiển
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
1
Giải trình
Div với lớp là vùng chứa có
và
các phần tử bên trong nó và phần tử tương tự được trả về khi chúng tôi sử dụng InternalHTML và điều khiển giá trị bên trong elemContent
Lấy đi
InternalHTML có thể được sử dụng để đọc nội dung HTML của một phần tử
b. Thay thế nội dung của một phần tử bằng cách sử dụng InternalHTML
Nội dung của một phần tử có thể được thay thế nếu chúng ta đặt giá trị của nội dung phần tử bằng cách sử dụng InternalHTML, cú pháp của nó như sau
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
2
Ở đây, tất cả HTML [cả XML nếu có] bên trong sample_Element được thay thế bằng những gì có trong chuỗi newHTML
Thí dụ
HTML

  



  
    
    
    replit
    
  
  
    

      
 Computer Science is no more about computers than astronomy is about telescopes. 
    

    
    
  

JS


  
    
    
    
  
  
    

      
    

    
  

1
đầu ra


  
    
    
    
  
  
    

      
    

    
  

2
Giải trình
Như bạn có thể thấy nội dung HTML trước đó bên trong div đã được thay thế, điều này là do InternalHTML trả về tất cả nội dung HTML có bên trong nó, điều này có nghĩa là vùng chứa. InternalHTML giống như một biến chứa chuỗi HTML bên trong nó và ở đây chúng tôi đã gán giá trị mới cho nó bằng cách sử dụng = do đó nội dung trước đó đã được thay thế
Lấy đi
InternalHTML có thể được sử dụng để thay thế nội dung HTML của một phần tử
c. Nối HTML vào một phần tử bằng cách sử dụng InternalHTML
Nếu chúng ta không muốn nội dung của phần tử bị thay thế, chúng ta chỉ cần nối HTML của mình vào nội dung của phần tử đó bằng cách sử dụng toán tử +, cú pháp của nó như sau
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
6
Ở đây, bất kỳ nội dung nào bên trong sample_Element sẽ không bị thay thế, newHTML sẽ được thêm vào nó
Lấy đi
InternalHTML có thể được sử dụng để nối thêm nội dung HTML của một phần tử
Thí dụ
HTML


  
    
    
    replit
    
  
  
    

      
 Computer Science is no more about computers than astronomy is about telescopes. 
    

    
    
  

JS
const containerElem = document.querySelector[".container"]

containerElem.innerHTML  = "
 Computer Science is no more about computers than astronomy is about telescopes. 
"
8
đầu ra


  
    
    
    
  
  
    

      
    

    
  

4
Giải thích. 
Như đã giải thích trong ví dụ trước, containerElem. InternalHTML giống như một biến chứa chuỗi HTML của tất cả nội dung HTML có trong bộ chứa div, ở đây chúng tôi đã sử dụng toán tử '+' hoạt động như một toán tử nối chuỗi. Do đó, thay vì thay thế nội dung HTML hiện có, nội dung mới sẽ được thêm vào nội dung đó
d. chi tiết hoạt động
Chúng ta hãy xem điều gì xảy ra đằng sau hậu trường khi chúng ta cố gắng thiết lập nội dung của một phần tử bằng cách sử dụng InternalHTML
Chuỗi do chúng tôi cung cấp được phân tích cú pháp dưới dạng HTML hoặc XML [tùy thuộc vào loại tài liệu] và một đối tượng DocumentFragment [nó là phiên bản trọng lượng nhẹ của đối tượng tài liệu] được tạo
Đối tượng DocumentFragment này chứa tập hợp các nút DOM cho các phần tử do chúng tôi chỉ định trong chuỗi
Sau đó, nội dung của phần tử mà chúng tôi đang cố sửa đổi được thay thế bằng các nút trong DocumentFragement mới
Lấy đi
Một đối tượng DocumentFragement mới được tạo dựa trên chuỗi HTML do chúng tôi cung cấp. Các nút trong đối tượng này thay thế nội dung HTML hiện có của phần tử
e. Rủi ro bảo mật
Trong các trang web mà InternalHTML được sử dụng để chèn nội dung vào một trang, đặc biệt là những trang thực hiện việc này bằng cách sử dụng đầu vào do người dùng nhập, có khả năng xảy ra một cuộc tấn công kịch bản chéo trang [XSS] gây rủi ro bảo mật
Một cuộc tấn công XSS có nghĩa là những người bên ngoài sẽ có thể chèn mã có hại vào các tập lệnh sẽ được xem và chạy bởi tất cả người dùng truy cập trang web
Chúng ta hãy xem hành vi của InternalHTML để hiểu thêm về cách điều này có thể xảy ra.  
Computer Science is no more about computers than astronomy is about telescopes.
0
Giả sử người dùng đã nhập tên là Scaler thông qua trường nhập liệu trong trang web và nó được hiển thị bằng cách sử dụng InternalHTML, đây là một trường hợp vô hại và mọi thứ đều hoạt động tốt
Nếu người dùng độc hại nhập chuỗi html thì chuỗi này sẽ được hiển thị và gây ra các thay đổi trong trang web bên ngoài
Computer Science is no more about computers than astronomy is about telescopes.
1
Các tập lệnh độc hại tương tự cũng có thể được đưa vào
Để tránh những tình huống như vậy thay vì sử dụng InternalHTML, bạn nên sử dụng. Yếu tố. đặtHTML. Nó thực hiện tương tự như InternalHTML và ngoài ra, nó còn khử trùng chuỗi đã cho. Nó loại bỏ mọi yếu tố, thuộc tính hoặc nhận xét không an toàn hoặc không mong muốn. Nút. văn bảnnội dung. Khi chúng tôi chèn văn bản thuần túy, tốt hơn là sử dụng textContent vì nó phân tích văn bản được chèn dưới dạng văn bản thô thay vì HTML
Lấy đi
Sử dụng InternalHTML là một rủi ro bảo mật, hãy sử dụng Element. setHTML và nút. textContent thay thế

JavaScript bên trong so với. bên trongHTML

Mặc dù cả hai đều được sử dụng để sửa đổi và trả về nội dung của một phần tử. Có một số khác biệt chính giữa hai

innerHTMLinnerTextinnerHTML trả về tất cả các phần tử và văn bản của chúng cùng với khoảng cách đã chỉ định, InternalText chỉ trả về văn bản mà không tính đến khoảng cách

InternalHTML nghĩa là gì?

Tại sao chúng tôi đang sử dụng InternalHTML?

Tôi có thể sử dụng InternalHTML ở đâu?

Khi nào nên sử dụng InternalHTML?