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

Last Updated : 17 Apr, 2025

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>

Output:

How to set Textarea Scroll Bar to Bottom as a Default using JavaScript/jQuery?

sayantanm19

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?