innerHTML
HTMLElementObject.innerHTML=text
document.getElementById(id name).style.property = new style
Each HTML element has an innerHTML property.
The innerHTML property sets or returns the inner HTML of an element.
Example: 1
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed";
}
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click "Change the text".
</div>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Example: 2
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
}
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click "Change the text".
</div>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Changing text color.
Example: 3
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.color="blue";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.color="blue";
}
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click "Change the text".
</div>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Creating box.
Example: 4
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
</head>
<body>
<div id="test">
I will disappear, if you click "Change the text".
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click "Change the text".
</div>
</body>
</html>
Output
I will disappear, if you click "Change the text".
Example: 5
<html>
<head>
<script type="text/javascript">
</head>
<body>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click Change the text.
</div>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
Output
I will disappear, if you click Change the text.
Example: 6
<html>
<head>
<script type="text/javascript">
</head>
<body>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
<head>
<script type="text/javascript">
function changeText()
{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</script>{
document.getElementById("test").innerHTML="hahaaa i just got changed<br><a href='http://google.com'>google</a>";
test.style.border= "5px dashed red";
}
function changeBack()
{
document.getElementById("test").innerHTML="I will disappear, if you click Change the text.";
test.style.border= "0px";
}
</head>
<body>
<div id="test">
I will disappear, if you click Change the text.
</div>
<button onclick="changeText();">Change the text</button>I will disappear, if you click Change the text.
</div>
<button onclick="changeBack();">Change the text[Back]</button>
</body>
</html>
Output
I will disappear, if you click Change the text.
Example: 7
<html>
<head>
<script type="text/javascript">
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById("thelink").innerHTML="Aspell";
thelink.href="http://aspell.org";
}
</script>{
document.getElementById("thelink").innerHTML="Aspell";
thelink.href="http://aspell.org";
}
</head>
<body>
<div id="test">
<a href="http://google.com" id="thelink">google</a>
</div>
<button onclick="changeLink();">Change the link</button><a href="http://google.com" id="thelink">google</a>
</div>
</body>
</html>
Output
No comments:
Post a Comment