Anthony
Anthony

Reputation: 742

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

Upvotes: 0

Views: 38

Answers (1)

Quentin
Quentin

Reputation: 943510

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.

Upvotes: 3

Related Questions