innerHTML
In this chapter you will learn:
- How to access the inner html for a HTML element
- What is the difference between innerHTML and outerHTML
- How to use innerHTML and outerHTML to change the HTML structure
Inner html
The inner html is change for the pre tag in the following code.
<!DOCTYPE HTML> <!--from j ava2s. co m-->
<html>
<head>
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<script>
var resultsElement = document.getElementById("results");
resultsElement.innerHTML = "line\n";
</script>
</body>
</html>
innerHTML vs outerHTML
The difference between innerHTML and outerHTML:
<!DOCTYPE HTML> <!--from j a va 2s.c o m-->
<html>
<body>
<table>
<tbody>
<tr id="myRow"><td>A</td><td>B</td></tr>
</tbody>
</table>
<textarea rows="3" id="results"></textarea>
<button id="inner">Inner HTML</button>
<button id="outer">Outer HTML</button>
<script>
var results = document.getElementById("results");
var row = document.getElementById("myRow");
document.getElementById("inner").onclick = function() {
results.innerHTML = row.innerHTML;
};
document.getElementById("outer").onclick = function() {
results.innerHTML = row.outerHTML;
}
</script>
</body>
</html>
HTML structure
You can use the outerHTML and innerHTML
properties to change the structure of the document.
<!DOCTYPE HTML> <!--from ja va 2 s . co m-->
<html>
<body>
<table>
<tbody>
<tr><td>A</td><td>B</td></tr>
<tr id="myRow"><td>C</td><td>D</td></tr>
</tbody>
</table>
<br/>
<table>
<tbody id="SurveysBody">
<tr><td>E</td><td>F</td></tr>
<tr id="targetrow"><td colspan="2">X</td></tr>
</tbody>
</table>
<button id="move">Move Row</button>
<script>
document.getElementById("move").onclick = function() {
var source = document.getElementById("myRow");
var target = document.getElementById("targetrow");
target.innerHTML = source.innerHTML;
source.outerHTML = '<tr id="targetrow"><td colspan="2">' +
'This is the placeholder</td>';
};
</script>
</body>
</html>
Next chapter...
What you will learn in the next chapter: