How to add content in <head> section using jQuery/JavaScript?

01 Jul, 2020
Any content can be added to the <head> section using the following two approaches:
Using the document.head propertySelecting the head element using jQuery
Using the document.head property
Selecting the head element using jQuery
Method 1: Using the document.head property: The head property of the document returns the head element of the document. Any new content can be added to this element by using the appendChild() method. The content to be added can be first created using the createElement() method and the required properties can be assigned to it. The appendChild() method appends this created element to the head of the document.
Syntax:
document.head.appendChild( elementToAdd );
Example:
<!DOCTYPE html><html lang="en">  <head>  <title>    How to add content in head section     using jQuery/JavaScript?  </title></head>  <body>  <h1 style="color: green;">    GeeksforGeeks  </h1>  <b>    How to add content in <head>    section using jQuery/JavaScript?  </b>    <button onclick="addStylesheet()">    Add Stylesheet to head  </button>  <br>      <button onclick="addJS()">    Add JavaScript to head  </button>  <br>  <b>Current Head Element</b>  <br>      <textarea cols="80" rows="14"     class="head-element">  </textarea>    <script>    function addStylesheet() {      let linkToAdd        = document.createElement('link');        // Link to water.css stylesheet      linkToAdd.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css';              linkToAdd.rel = 'stylesheet';        // Get the head element of the document      // and append the link      document.head.appendChild(linkToAdd);        // Update textarea      updateHeadOutput();    }      function addJS() {      let scriptToAdd        = document.createElement('script');      scriptToAdd.type        = 'text/javascript';        // Create contents of the script      let inlineScript = document.createTextNode(        "console.log('Script Loaded Successfully');");        scriptToAdd.appendChild(inlineScript);        // Uncomment to load script from another       // source      // scriptToAdd.src = 'myscript.js';        // Get the head element of the document      // and append the script      document.head.appendChild(scriptToAdd);        // Update textarea      updateHeadOutput();    }      function updateHeadOutput() {      document.querySelector(".head-element")        .textContent = document.head.innerHTML;    }      updateHeadOutput();  </script></body>  </html>
Output:
Before clicking the button:
After adding a script:
After adding a stylesheet:
Method 2: Selecting the head element using jQuery: The head property of the document can be selected using a jQuery selector. The new content can be added to this selected element by using the append() method. The content to be added can be first created using the createElement() method. The append() method then appends this created element at the end to the selected element, that is to the head.
Syntax:
$('head').append( elementToAdd );
Example:
<!DOCTYPE html><html lang="en">  <head>  <title>    How to add content in head section     using jQuery/JavaScript?  </title>    <!-- Include jQuery -->  <script src="https://code.jquery.com/jquery-3.5.1.min.js">  </script></head>  <body>  <h1 style="color: green;">    GeeksforGeeks  </h1>  <b>    How to add content in <head>    section using jQuery/JavaScript?  </b>  <button onclick="addStylesheet()">    Add Stylesheet to head  </button>  <br>  <button onclick="addJS()">    Add JavaScript to head  </button>  <br>  <b>Current Head Element</b>  <br>    <textarea cols="80" rows="14"     class="head-element">  </textarea>    <script>    function addStylesheet() {      let linkToAdd =         document.createElement('link');        // Link to water.css stylesheet      linkToAdd.href = 'https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css';              linkToAdd.rel = 'stylesheet';        // Select the head element      // and append the created link      $('head').append(linkToAdd);        // Update textarea      updateHeadOutput();    }      function addJS() {      let scriptToAdd =         document.createElement('script');        scriptToAdd.type = 'text/javascript';        // Create contents of the script      let inlineScript = document.createTextNode(        "console.log('Script Loaded Successfully');");        scriptToAdd.appendChild(inlineScript);        // Uncomment to load script from another      // file      // scriptToAdd.src = 'myscript.js';        // Select the head element      // and append the script      $('head').append(scriptToAdd);        // Update textarea      updateHeadOutput();    }      function updateHeadOutput() {      document.querySelector(".head-element")        .textContent = document.head.innerHTML;    }      updateHeadOutput();  </script></body>  </html>
Output:
Before clicking the button:
After adding a script:
After adding a stylesheet:
CSS-Misc
HTML-Misc
JavaScript-Misc
jQuery-Misc
Picked
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.