HTML DOM आंतरिक HTML गुण वापस आता है और हमें किसी तत्व के आंतरिक HTML को संशोधित करने की अनुमति देता है। आंतरिक HTML सामग्री है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. आंतरिक HTML लौटाना
object.innerHTML
2. आंतरिक HTML सेट करना
object.innerHTML=”value”
यहां, “मान ” सामग्री या नेस्टेड HTML तत्वों का प्रतिनिधित्व करता है।
उदाहरण
आइए हम आंतरिक HTML गुण का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
“वर्ग प्राप्त करें . पर क्लिक करें हरे वर्ग के अंदर वर्ग प्रदर्शित करने के लिए बटन।
अब, “मंडल प्राप्त करें . पर क्लिक करें हरे वर्ग के अंदर वृत्त प्रदर्शित करने के लिए बटन।
