Menu
I wrote a Chrome extension that works before the page is loaded (using the attribute "run_at": "document_start").
The problem is that I want to add a div tag to the web page body as soon as it is created.
Before that document.body is null so I can't append tags to it.
I don't care about full load of the body, I just need it to be existent.
I am trying to find the best way to be alerted when the body tag in html is created (not loaded fully, just created). Is there any event handler for this case that I can write?
Also, I don't want to use jQuery or any other non built-in library.
973
You could use a mutation observer on document.documentElement listening for changes to its childList and looking to see whether the thing that got added is body.
Example: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script>
(function() {
"use strict";
var observer = new MutationObserver(function() {
if (document.body) {
// It exists now
document.body.insertAdjacentHTML(
"beforeend",
"<div>Found <code>body</code></div>"
);
observer.disconnect();
}
});
observer.observe(document.documentElement, {childList: true});
})();
</script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
You can use DOMContentLoaded event which is similar to $(document).ready()
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
MDN says
The
DOMContentLoadedevent is fired when thedocumenthas been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (theloadevent can be used to detect a fully-loaded page).
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
