innerHTML

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <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>
Click to view the demo

The difference between innerHTML and outerHTML:

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <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>
Click to view the demo

You can use the outerHTML and innerHTML properties to change the structure of the document.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 

    </head> 
    <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>
Click to view the demo
Home 
  JavaScript Book 
    DOM  

HTMLElement:
  1. The HTMLElement Members
  2. element tag name, id, direction, language, hidden disabled information
  3. addEventListener
  4. appendChild
  5. attributes returns a collection containing all of the attributes
  6. classList
  7. className
  8. cloneNode
  9. createElement
  10. createTextNode
  11. dataset
  12. getAttribute
  13. getElementsByTagName
  14. hasAttribute
  15. innerHTML
  16. insertAdjacentHTML
  17. insertBefore
  18. isSameNode
  19. outerHTML
  20. onmouseout
  21. onmouseover
  22. querySelectorAll
  23. removeEventListener