programming html

Tôi có thể thêm các thẻ HTML vào InternalHTML không?

Có nhiều thuộc tính khác nhau trong JavaScript giúp làm việc với HTML của trang hiện tại. Thuộc tính innerHTML trong JavaScript được sử dụng để thêm Html vào phần tử. Nó cũng trả về nội dung có trong một phần tử

Tập lệnh là các chương trình hoặc mã JavaScript giúp trang web tương tác và động. Chúng tôi có thể thêm tập lệnh trong thẻ tập lệnh trên cùng một trang hoặc một trang JavaScript khác được liên kết với tệp HTML

HTML được chèn vào thuộc tính innerHTML cho một phần tử. Tuy nhiên, không thể chèn tập lệnh vào thuộc tính InternalHTML. Nếu được chèn vào InternalHTML, nó sẽ không được hiển thị trên trang cũng như không được thực thi. Tập lệnh trong InternalHTML không làm gì trên trang web

Vì vậy, chúng ta hãy xem tập lệnh được chèn bằng InternalHTML và cách thêm tập lệnh để thực thi

Chèn tập lệnh bằng InternalHTML

InternalHTML được sử dụng để thay thế nội dung của phần tử Html bằng nội dung Html được thêm vào nó. Nó được sử dụng cho nội dung Html và không thể thực thi tập lệnh với thuộc tính này. Tập lệnh được thêm vào bên trongHTML cũng không hiển thị trên màn hình

Chúng tôi không thể sử dụng InternalHTML cho các thành phần của tập lệnh. Nhưng chúng ta có thể thêm tập lệnh vào phần tử bằng cách tạo tập lệnh có tên phần tử bằng phương thức createElement. Chúng tôi phải thêm một tập lệnh bên trong nó bằng cách sử dụng InternalHTML và sau đó nối nó trở lại phần tử phải thêm tập lệnh. Theo cách này, trước tiên chúng ta phải thêm tập lệnh vào phần tử tập lệnh rồi đến phần tử HTML bằng cách nối nó vào một phần tử

Chúng tôi đang làm theo cú pháp dưới đây để chèn tập lệnh với InternalHTML

cú pháp

//A wrong way to add a script using innerHTML
var element = document.getElementById[""];
element.innerhtml= "";

//A right way to add a script using innerHTML
var script= document.createElement["script"];
script.innerhtml="";
element.appendChild[ script ];

Chúng tôi đang làm theo cú pháp trên để kiểm tra xem các tập lệnh có thể được chèn bằng InternalHTML hay không

Ví dụ

Trong ví dụ bên dưới, chúng ta phải hiển thị bình phương của số do người dùng nhập vào trường nhập liệu. Chúng tôi đã thêm tập lệnh vào thuộc tính InternalHTML của một phần tử. Nhưng nó không phải là hành vi của thuộc tính này để thực thi tập lệnh như thế này. Tập lệnh này đã trở nên vô dụng vì nó không thực thi cũng như không hiển thị trên màn hình. Vì vậy, chúng tôi đã tạo một phần tử tập lệnh bằng thuộc tính createElement và thêm một tập lệnh bên trong nó bằng cách sử dụng InternalHTML. Cuối cùng, chúng tôi đã thêm phần tử tập lệnh này vào một phần tử trong phần tử HTML

Using the innerHTML property to insert a script

Enter a number:
Submit

Trong ví dụ này, người dùng có thể thấy rằng để thực thi một tập lệnh bằng thuộc tính innerHTML, chúng ta phải thêm nó thông qua phần tử tập lệnh

Chèn tập lệnh bằng phương thức eval[] với InternalHTML

Phương thức eval[] là phương thức trong JavaScript lấy tập lệnh dưới dạng một chuỗi trong tham số của nó. Nó sẽ thực thi chuỗi được cung cấp trong tham số dưới dạng câu lệnh JavaScript và trả về kết quả của tập lệnh. Chúng ta phải chèn tập lệnh trong dấu ngoặc kép hoặc đơn vì phương thức này cung cấp tập lệnh dưới dạng chuỗi

Tất cả người dùng có thể làm theo cú pháp để sử dụng phương thức eval[] với InternalHTML để chèn tập lệnh

cú pháp

var element = document.getElementById[""];
element.innerhtml= eval[""];

Thực hiện theo cú pháp trên để sử dụng phương thức eval[] trong JavaScript

Ví dụ

Trong ví dụ này, chúng tôi đã sử dụng phương thức eval[] để thực thi tập lệnh bên trong thuộc tính InternalHTML. Từ người dùng, chúng tôi sẽ lấy hai đầu vào, hiển thị phép trừ trên màn hình sau khi nhấp vào nút. Tập lệnh trừ một số đã được thêm vào bên trong phương thức eval trong thuộc tính InternalHTML

Using the eval[] method to insert a script through innerHTML

First number:
-
Second number:
Substract

Trong ví dụ trên, người dùng có thể thấy rằng chúng ta đã sử dụng phương thức eval[] để thực thi một chuỗi bên trong thuộc tính InternalHTML của JavaScript

Bản tóm tắt. trong hướng dẫn này, bạn sẽ học cách sử dụng thuộc tính JavaScript

let content = element.innerHTML;
Code language: JavaScript [javascript]

2 của một phần tử để lấy hoặc đặt đánh dấu HTML có trong phần tử đó

let content = element.innerHTML;
Code language: JavaScript [javascript]

2 là thuộc tính của

let content = element.innerHTML;
Code language: JavaScript [javascript]

4 cho phép bạn lấy hoặc đặt đánh dấu HTML có trong phần tử

element.innerHTML = 'new content';
element.innerHTML;
Code language: JavaScript [javascript]

Đọc thuộc tính InternalHTML của một phần tử

Để lấy đánh dấu HTML có trong một phần tử, bạn sử dụng cú pháp sau

let content = element.innerHTML;
Code language: JavaScript [javascript]

Khi bạn đọc

let content = element.innerHTML;
Code language: JavaScript [javascript]

2 của một phần tử, trình duyệt web phải tuần tự hóa đoạn HTML của phần tử con của phần tử đó

1] Ví dụ JavaScript InternalHTML đơn giản

Giả sử rằng bạn có đánh dấu sau

 
    Home
    Services
Code language: HTML, XML [xml]

Ví dụ sau sử dụng thuộc tính

let content = element.innerHTML;
Code language: JavaScript [javascript]

2 để lấy nội dung của phần tử

let content = element.innerHTML;
Code language: JavaScript [javascript]

let menu = document.getElementById['menu'];
console.log[menu.innerHTML];
Code language: JavaScript [javascript]

Làm thế nào nó hoạt động

Đầu tiên, chọn phần tử

let content = element.innerHTML;
Code language: JavaScript [javascript]

7 theo id của nó [

let content = element.innerHTML;
Code language: JavaScript [javascript]

9] bằng cách sử dụng phương thức

 
    Home
    Services
Code language: HTML, XML [xml]

Sau đó, lấy nội dung HTML của phần tử

let content = element.innerHTML;
Code language: JavaScript [javascript]

7 bằng cách sử dụng hàm

let content = element.innerHTML;
Code language: JavaScript [javascript]

đầu ra

Home
Services
Code language: HTML, XML [xml]

2] Kiểm tra nguồn HTML hiện tại

Thuộc tính

let content = element.innerHTML;
Code language: JavaScript [javascript]

2 trả về nguồn HTML hiện tại của tài liệu, bao gồm tất cả các thay đổi đã được thực hiện kể từ khi trang được tải

Xem ví dụ sau




    
    JavaScript innerHTML


    
        Home
        Services
    
    
        let menu = document.getElementById['menu'];

        // create new li element
        let li = document.createElement['li'];
        li.textContent = 'About Us';
        // add it to the ul element
        menu.appendChild[li];

        console.log[menu.innerHTML];
    

Code language: HTML, XML [xml]

đầu ra

Home
Services
About Us
Code language: HTML, XML [xml]

Làm thế nào nó hoạt động

Đầu tiên, lấy phần tử

let content = element.innerHTML;
Code language: JavaScript [javascript]

7 với id

let content = element.innerHTML;
Code language: JavaScript [javascript]

9 bằng cách sử dụng phương thức

 
    Home
    Services
Code language: HTML, XML [xml]

Second, create a new
```
 
    Home
    Services
Code language: HTML, XML [xml]
```
7 element and add it to the
- Third, get the HTML of the
```
let content = element.innerHTML;
Code language: JavaScript [javascript]
```
  7 element using the innerHTML property of the

Chèn tập lệnh bằng InternalHTML

cú pháp

Ví dụ

Using the innerHTML property to insert a script

Chèn tập lệnh bằng phương thức eval[] với InternalHTML

cú pháp

Ví dụ

Using the eval[] method to insert a script through innerHTML

Đọc thuộc tính InternalHTML của một phần tử

1] Ví dụ JavaScript InternalHTML đơn giản

2] Kiểm tra nguồn HTML hiện tại

Đặt thuộc tính InternalHTML của một phần tử

⚠️ Rủi ro bảo mật

Làm cách nào để đặt thẻ HTML trong InternalHTML?

Tại sao bạn không nên sử dụng InternalHTML?

Làm cách nào để đặt thẻ InternalHTML trong JavaScript?

Nhược điểm của việc sử dụng InternalHTML là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề