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

Last Updated : 07 Feb, 2023

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

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:

html

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

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:

html

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