Hướng dẫn what is innerhtml used for in javascript? – Internalhtml được sử dụng để làm gì trong javascript?

Posted on by mtoplistChuyên mục:Top List
phần tử.innerhtml = “”;
Just the text content of the element and all its children, without CSS hidden text spacing and tags, except

Mặc dù điều này có thể trông 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 thẻ 

const
 list 
=
 document
.
getElementById
(
"list"
)
;


list
.
innerHTML 
+=
 
`
<li><a href="#">Item 
${
list
.
children
.
length 
+
 
1
}
</a></li>
`
;

6 được chèn bằng 

document
.
body
.
innerHTML 
=
 
""
;

2 không nên thực thi.

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

const
 list 
=
 document
.
getElementById
(
"list"
)
;


list
.
innerHTML 
+=
 
`
<li><a href="#">Item 
${
list
.
children
.
length 
+
 
1
}
</a></li>
`
;

6, 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 
=
 
""
;

2 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ:

const
 name 
=
 
"<img src='x' onerror='alert(1)'>"
;

el
.
innerHTML 
=
 name
;
 
// shows the alert

Vì lý do đó, nên thay vì 

document
.
body
.
innerHTML 
=
 
""
;

2 bạn sử dụng:

  • document
    .
    documentElement
    .
    innerHTML 
    =
     
    `
    <pre>
    ${
    document
    .
    documentElement
    .
    innerHTML
    .
    replace
    (
    /
    <
    /
    g
    ,
    "&lt;"
    )
    }
    </pre>
    `
    ;

    7 để vệ sinh văn bản trước khi nó được chèn vào DOM.

  • let
     name 
    =
     
    "John"
    ;
    

    // assuming 'el' is an HTML DOM element
    
el
    .
    innerHTML 
    =
     name
    ;
     
    // harmless in this case
    


    // …
    

name 
    =
     
    "<script>alert('I am John in an annoying alert!')</script>"
    ;
    
el
    .
    innerHTML 
    =
     name
    ;
     
    // harmless in this case

    2 Khi chèn văn bản đơn giản, vì điều này chèn nó dưới dạng văn bản thô thay vì phân tích cú pháp nó là HTML.

Tóm Tắt

Ví dụ

Ví dụ này sử dụng 

document
.
body
.
innerHTML 
=
 
""
;

2 để tạo cơ chế để đăng nhập tin nhắn vào một hộp trên trang web.

2 để tạo cơ chế để đăng nhập tin nhắn vào một hộp trên trang web.

JavaScript

function
 
log
(
msg
)
 
{

  
const
 logElem 
=
 document
.
querySelector
(
".log"
)
;


  
const
 time 
=
 
new
 
Date
(
)
;

  
const
 timeStr 
=
 time
.
toLocaleTimeString
(
)
;

  logElem
.
innerHTML 
+=
 
`
${
timeStr
}
: 
${
msg
}
<br/>
`
;


}



log
(
"Logging mouse events inside this container…"
)
;

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

document
.
body
.
innerHTML 
=
 
""
;

2 để nối các yếu tố HTML (ví dụ: 

const
 list 
=
 document
.
getElementById
(
"list"
)
;


list
.
innerHTML 
+=
 
`
<li><a href="#">Item 
${
list
.
children
.
length 
+
 
1
}
</a></li>
`
;

4) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

2 để nối các yếu tố HTML (ví dụ:4) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

Cân nhắc về Bảo mật

function
 
logEvent
(
event
)
 
{

  
const
 msg 
=
 
`
Event <strong>
${
event
.
type
}
</strong> at <em>
${
event
.
clientX
}
, 
${
event
.
clientY
}
</em>
`
;

  
log
(
msg
)
;


}

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

document
.
body
.
innerHTML 
=
 
""
;

2 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

2 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

const
 boxElem 
=
 document
.
querySelector
(
".box"
)
;


boxElem
.
addEventListener
(
"mousedown"
,
 logEvent
)
;

boxElem
.
addEventListener
(
"mouseup"
,
 logEvent
)
;

boxElem
.
addEventListener
(
"click"
,
 logEvent
)
;

boxElem
.
addEventListener
(
"mouseenter"
,
 logEvent
)
;

boxElem
.
addEventListener
(
"mouseleave"
,
 logEvent
)
;

HTML

JavaScript

document
.
body
.
innerHTML 
=
 
""
;

0

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

document
.
body
.
innerHTML 
=
 
""
;

2 để nối các yếu tố HTML (ví dụ: 

const
 list 
=
 document
.
getElementById
(
"list"
)
;


list
.
innerHTML 
+=
 
`
<li><a href="#">Item 
${
list
.
children
.
length 
+
 
1
}
</a></li>
`
;

4) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

2 để nối các yếu tố HTML (ví dụ:4) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

Cân nhắc về Bảo mật

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

document
.
body
.
innerHTML 
=
 
""
;

2 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

2 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

document
.
body
.
innerHTML 
=
 
""
;

1

Mặc dù điều này có thể trông 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 thẻ const list = document.getElementById(“list”);
list.innerHTML += `<li><a href=”#”>Item ${list.children.length + 1}</a></li>`;
6 được chèn bằng document.body.innerHTML = “”;
2 không nên thực thi.

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

const
 list 
=
 document
.
getElementById
(
"list"
)
;


list
.
innerHTML 
+=
 
`
<li><a href="#">Item 
${
list
.
children
.
length 
+
 
1
}
</a></li>
`
;

6, 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 
=
 
""
;

2 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ:

6, do đó vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng2 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ:

Vì lý do đó, nên thay vì document.body.innerHTML = “”;
2 bạn sử dụng:

document
.
documentElement
.
innerHTML 
=
 
`
<pre>
${
document
.
documentElement
.
innerHTML
.
replace
(
/
<
/
g
,
"&lt;"
)
}
</pre>
`
;

7 để vệ sinh văn bản trước khi nó được chèn vào DOM.

let
 name 
=
 
"John"
;


// assuming 'el' is an HTML DOM element

el
.
innerHTML 
=
 name
;
 
// harmless in this case



// …


name 
=
 
"<script>alert('I am John in an annoying alert!')</script>"
;

el
.
innerHTML 
=
 name
;
 
// harmless in this case

2 Khi chèn văn bản đơn giản, vì điều này chèn nó dưới dạng văn bản thô thay vì phân tích cú pháp nó là HTML.
# dom-innerhtml-innerhtml

Ví dụ

Ví dụ này sử dụng 

document
.
body
.
innerHTML 
=
 
""
;

2 để tạo cơ chế để đăng nhập tin nhắn vào một hộp trên trang web.

Hàm let name = “John”;
// assuming ‘el’ is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = “<script>alert(‘I am John in an annoying alert!’)</script>”;
el.innerHTML = name; // harmless in this case
4 tạo ra đầu ra nhật ký bằng cách nhận thời gian hiện tại từ đối tượng let name = “John”;
// assuming ‘el’ is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = “<script>alert(‘I am John in an annoying alert!’)</script>”;
el.innerHTML = name; // harmless in this case
5 bằng cách sử dụng let name = “John”;
// assuming ‘el’ is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = “<script>alert(‘I am John in an annoying alert!’)</script>”;
el.innerHTML = name; // harmless in this case
6 và xây dựng một chuỗi với dấu thời gian và văn bản tin nhắn. Sau đó, thông báo được gắn vào hộp với lớp let name = “John”;
// assuming ‘el’ is an HTML DOM element
el.innerHTML = name; // harmless in this case
// …
name = “<script>alert(‘I am John in an annoying alert!’)</script>”;
el.innerHTML = name; // harmless in this case
7.

Tôi có thể sử dụng bên trong ở đâu?

Sử dụng bên trong khi bạn đặt văn bản bên trong thẻ HTML như thẻ neo, thẻ đoạn văn, span, div hoặc textarea.Sử dụng appendChild () nếu bạn đang cố gắng thêm các phần tử DOM mới bên trong một phần tử DOM khác.

when you’re setting text inside of an HTML tag like an anchor tag, paragraph tag, span, div, or textarea

. Use appendChild() If you’re trying to add new DOM elements inside of another DOM element.

Internhtml có thể chứa JavaScript không?

Có thể thực thi JavaScript thông qua InsideHTML mà không cần sử dụng các thẻ như được minh họa trên trang bên trong của MDN.Để tự động thêm một thẻ tập lệnh, bạn cần tạo một phần tử tập lệnh mới và nối nó vào phần tử đích.

as illustrated on MDN’s innerHTML page. To dynamically add a script tag, you need to create a new script element and append it to the target element.

Tôi nên sử dụng InnerHTML hay Internaltext?

InnerText trả về tất cả các văn bản được chứa bởi một phần tử và tất cả các phần tử con của nó.innerhtml trả về tất cả các văn bản, bao gồm các thẻ HTML, được chứa bởi một phần tử.

innerHtml returns all text, including html tags, that is contained by an element

.

Làm thế nào để bạn làm việc bên trong?

Để đặt giá trị của thuộc tính bên trong, bạn sử dụng cú pháp này: Element.innerhtml = newhtml;Cài đặt sẽ thay thế nội dung hiện có của một phần tử bằng nội dung mới.

element.

innerHTML = newHTML;

The setting will replace the existing content of an element with the new content.

mtoplist