How to Add Dom Element Script to Head Section

Script in head section to create a DIV in the body

Since the script is in the head section and is loaded before the body tag is created you won't find the body tag to place a DIV in it.
There are multiple ways you can wrap your script so that it would run after the DOM is loaded. Each with a nuance difference to it.
You can see examples of them at MDN.
Basically, you can load this code by writing it in this function and it would load after all the page is loaded (including images and other scripts):

window.addEventListener('load', (event) => {
   var condiv = document.createElement("div");
   (condiv.innerHTML = " "),
      condiv.setAttribute("class", "ads"),
      document.body.appendChild(condiv),
      0 === condiv.offsetHeight ||
          (function () {

          }
});

there are ways to load it after only the DOM is loaded that are elaborated in this question I think the answers over there would be even better for your use.

How to append script/script in JavaScript?

Try this:

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

Note that the script will load and you can access the variables inside it, but you wouldn't see the actual <script> tag in the DOM.

How to have a script in the head add script at the end of the body

Use DOMContentLoaded event:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

document.addEventListener("DOMContentLoaded", function (event) {
  console.log("DOM fully loaded and parsed");

  // Your code here
});

DOMContentLoaded is same as ready event of jQuery.

Documentation

How can I insert a script into HTML head dynamically using JavaScript?

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function() {
    callFunctionFromScript();
}
script.src = 'path/to/your-script.js';
head.appendChild(script);

Using document.head.appendChild() to append a script tag that has an SRC attribute?

element.appendChild expects a node not a string. You should first create the node and set the attributes and then append it.

element.appendChild Reference

var sc = document.createElement("script");
sc.setAttribute("src", "https://getfirebug.com/firebug-lite.js");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);

For older browsers (IE < 9 etc.) that doesn't support document.head

document.getElementsByTagName("head")[0].appendChild(sc);

How to add a script element to the DOM and execute its code?

I have no idea how YUI's Node.create() function works, so no comment on that. But a simple cross-browser script is:

  window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = 'alert("hello world!");';
    try {
      s.appendChild(document.createTextNode(code));
      document.body.appendChild(s);
    } catch (e) {
      s.text = code;
      document.body.appendChild(s);
    }
  }

The try..catch block is necessary as most browsers like the first method but some don't and throw an error. The second method covers those. You can also simply eval the code, which is more or less equivalent and what some libraries do.

---

Related Topics