Ví dụ
Nhận nội dung HTML của một phần tử với id="myP"
hãy để html = tài liệu. getElementById["myP"]. bên trongHTML;
Tự mình thử »Thay đổi nội dung HTML của một phần tử với id="demo"
tài liệu. getElementById["bản trình diễn"]. innerHTML = "Tôi đã thay đổi. “;
Tự mình thử »Lấy nội dung HTML của một
- phần tử có id="myList"
hãy để html = tài liệu. getElementById["myList"]. bên trongHTML;
Xóa nội dung HTML của một
phần tử có id="demo"
Tự mình thử »Thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tính innerHTML
đặt hoặc trả về nội dung HTML [HTML bên trong] của một phần tử
Sự khác biệt giữa
innerHTML, văn bản bên trong và nội dung văn bản
Xem bên dưới
cú pháp
Trả về thuộc tính InternalHTML
Đặt thuộc tính InternalHTML
Giá trị tài sản
Thuộc tínhMô tảStringNội dung HTMLGiá trị trả về
TypeDescriptionStringNội dung HTML của phần tửThêm ví dụ
Ví dụ
Thay đổi nội dung HTML của hai phần tử
let text = "Xin chào Dolly. ";
tài liệu. getElementById["myP"]. innerHTML = văn bản;
tài liệu. getElementById["myDIV"]. InternalHTML = văn bản;
Ví dụ
Lặp lại nội dung HTML của một phần tử
thành phần. phần tử bên trongHTML +=. bên trongHTML;
Tự mình thử »Ví dụ
Thay đổi nội dung HTML và URL của một liên kết
. innerHTML = "W3Schools";
phần tử. href = "https. //www. w3schools. com";
Sự khác biệt giữa
innerHTML, văn bản bên trong và nội dung văn bản
Thuộc tính innerHTML trả về. Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và thẻ HTML bên trong. Thuộc tính InternalText trả về.
Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có thẻ và khoảng cách văn bản ẩn CSS, ngoại trừ
Hướng dẫn này giải thích cách sử dụng thuộc tính phản ứng nguy hiểm SetInnerHTML bên trong thành phần ứng dụng phản ứng. dangerouslySetInnerHTML là sự thay thế của React cho việc sử dụng InternalHTML trong DOM của trình duyệt. Nói chung, việc đặt HTML từ mã là rủi ro vì rất dễ khiến người dùng của bạn vô tình bị tấn công bằng tập lệnh chéo trang [XSS]. Vì vậy, bạn có thể đặt HTML trực tiếp từ React, nhưng bạn phải nhập DangerlySetInnerHTML và chuyển một đối tượng bằng khóa __html, để nhắc nhở bản thân rằng điều đó nguy hiểm.
LƯU Ý. Việc sử dụng InternalHTML không đúng cách có thể khiến bạn bị tấn công bằng tập lệnh chéo trang [XSS]. Vệ sinh đầu vào của người dùng để hiển thị nổi tiếng là dễ xảy ra lỗi và việc không vệ sinh đúng cách là một trong những nguyên nhân hàng đầu gây ra lỗ hổng web trên internet.
$&'
];
return htmlData;
}
// inner HTML Example...
function createMarkup[] {
let getValue = textToLink[
"display text with link :- https://www.skptricks.com/2018/12/javascript-timers-with-examples.html"
];
return {
__html: getValue
};
}
//React component...
function MyComponent[] {
return ;
}
const rootElement = document.getElementById["root"];
ReactDOM.render[, rootElement];
Output :
----------------------
Check out this link : //codesandbox.io/s/42q8krj1ow
This is all about react dangerouslySetInnerHTML attribute. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.