Thuộc tính HTML DOM InternalHTML trả về và cho phép chúng tôi sửa đổi HTML bên trong của một phần tử. HTML bên trong là nội dung.
Cú pháp
Sau đây là cú pháp -
1. Trả lại bên trongHTML
object.innerHTML
2. Đặt HTML bên trong
object.innerHTML=”value”
Đây, “ giá trị ”Đại diện cho nội dung hoặc các phần tử HTML lồng nhau.
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính innerHTML -
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.outer-box{
background-color:#347924;
width:200px;
height:200px;
padding:10px;
text-align:center;
font-weight:bold;
color:white;
margin:1rem auto;
}
.inner-box{
width:100px;
height:100px;
margin:3rem auto;
background-color:#8dce79;
}
.inner-circle{
width:100px;
height:100px;
border-radius:50%;
background-color:#8dce79;
margin:3rem auto;
}
</style>
</head>
<body>
<h1>innerHTML property Example</h1>
<div class="outer-box">
</div>
<button onclick="getsquare()">Get Square</button>
<button onclick="getcircle()">Get Circle</button>
<script>
function getsquare() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-box">square</div>';
}
function getcircle() {
var outerBox = document.querySelector('.outer-box');
outerBox.innerHTML ='<div class="inner-circle">circle</div>';
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Get Square ”Để hiển thị hình vuông bên trong hình vuông màu xanh lục.
Bây giờ, hãy nhấp vào “ Nhận vòng kết nối ”Để hiển thị hình tròn bên trong hình vuông màu xanh lục.
