Search code examples
javascriptdomappendchild

Why do DOM additions with appendChild display on the browser but not in the source?

I am adding styles dynamically with appendChild and they work but they don't appear in the source of the markup (despite calling appendChild after window.onload).

const style = document.createElement('style');
style.innerHTML = `h1{color:red;}`;
window.onload = function(){document.head.appendChild(style);}

https://jsfiddle.net/QK9sE0/9wtkr7mo/

enter image description here

Solution

  • Because the source is the source and not a live representation of the current state of the DOM.

    If you followed the instructions to build a LEGO model and then added some more pieces, it wouldn’t change the instructions.

    Most browsers have a set of Developer Tools with an Inspect tab that will show a live representation of the current state of the DOM.