How to access the inner html for a HTML element in Javascript
Inner html
The inner html is change for the pre tag in the following code.
Example
<!DOCTYPE HTML>
<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><!--from ww w. j a v a 2 s . com-->
innerHTML vs outerHTML
The difference between innerHTML and outerHTML:
<!DOCTYPE HTML>
<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;
}; <!-- w w w. j av a 2 s .c o m-->
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>
<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>';
}; <!--from w w w . j av a2 s.c o m-->
</script>
</body>
</html>