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

Any content can be added to the <head> section using the following two approaches:

  1. Using the document.head property
  2. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 = 
        
      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>

chevron_right


Output:



  • Before clicking the button:
    js-before
  • After adding a script:
    js-after-script
  • After adding a stylesheet:
    js-after-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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>
    How to add content in head section 
    using jQuery/JavaScript?
  </title>
  
  <!-- Include jQuery -->
  <script src=
  </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 = 
        
      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>

chevron_right


Output:

  • Before clicking the button:
    jq-before
  • After adding a script:
    jq-after-script
  • After adding a stylesheet:
    jq-after-stylesheet

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.