DOM Enlightenment Book

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="A"></div>
<div id="B"></div>
<span id="C"></span>
<div id="D"></div>
<div id="E"></div>


























































<h4 style="border-top:1px solid #ADADAD;padding-top:20px;margin-top:20px;"><strong>&larr; Code Example from <a href="http://www.domenlightenment.com/" target="_blank">DOM Enlightenment Book</a> by <a href="http://www.codylindley.com" target="_blank">Cody Lindley</a></strong></h4>

<p>JavaScript code is executed on page load. Click the "Run" button in the top bar to re-run the JavaScript code. All <code>console.log()'s</code> are logged to the <a href="http://getfirebug.com/firebuglite" target="_blank">Firebug Lite</a> console below &darr;.</p>

JavaScript

//create a strong element and text node and add it to the DOM
document.getElementById('A').innerHTML = '<strong>Hi</strong>'; 

//create a div element and text node to replace <span id="B"></div> (notice div#B is replaced)
document.getElementById('B').outerHTML = '<div id="B" class="new">Whats Shaking</div>'

//create a text node and update the div#C with the text node
document.getElementById('C').textContent = 'dude';

//create a text node and update the div#D with the text node
document.getElementById('D').innerText = 'Keep it';

document.getElementById('D').innerText = 'Keep ootttt';

//create a text node and replace the div#E with the text node (notice div#E is gone)
document.getElementById('E').outerText = 'real!';

console.log(document.body.innerHTML);
/* logs
<div id="A"><strong>Hi</strong></div>
<div id="B" class="new">Whats Shaking</div>
<span id="C">dude</span>
<div id="D">Keep it</div>
real!
*/