How to add content in <head> section using jQuery/JavaScript? Last Updated : 17 Apr, 2025 Comments Improve Suggest changes Like Article Like Report Any content can be added to the <head> section using the following two approaches:Using the document.head propertySelecting the head element using jQueryMethod 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: Comment More infoAdvertise with us Next Article How to add content in <head> section using jQuery/JavaScript? sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies JQuery JavaScript-Questions jQuery-Questions +1 More Similar Reads How to append data to <div> element using JavaScript ? To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div. 1 min read How to Create a Style Tag using JavaScript? To create a <style> tag using JavaScript, use the document.createElement() method to create the tag, which allows you to dynamically add elements to the DOM.Syntaxdocument.createElement('style')Example 1: This HTML code dynamically styles a <div> element with a green background and white 1 min read How to Load DIV Content on Click Only using JavaScript? To load content into a div when a button or any other element is clicked using JavaScript, you can follow these simple steps. You can either load static content or fetch data from an external source using AJAX (for more advanced usage). Below is a basic example to load content into a div when a butt 2 min read How to append HTML code to a div using JavaScript ? The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely usedâover 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web 6 min read How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to define header for a document or section using HTML ? The <header> tag in HTML is used to define the header for a document or a section. It contains information related to the title and heading of the related content. The <header> element is intended to usually contain the sectionâs heading (an h1-h6 element or an <hgroup> element), b 2 min read How to Change Text Inside all HTML Tags using JavaScript ? In this article, we will learn how to change the text content inside all HTML tags using JavaScript. This skill is valuable when you need to dynamically modify the text displayed on a web page. which can be useful for various scenarios like updating content, internationalization, or creating dynamic 3 min read How to Combine multiple elements and append the result into a div using JavaScript ? Combining multiple elements and appending elements to DOM is a crucial process, it would become a time-consuming process. If not handled properly so as a developer we should know how to update the DOM effectively. So following are the three ways to append HTML elements to DOM. The following methods 3 min read How to create an FAQ section to any website using JavaScript ? We will create a Frequently Asked Questions(FAQ) accordion using JavaScript. The accordion is used to display the content in list format. It can expand or collapse to display the content it contains.ApproachSelection of Elements:Use document.querySelectorAll to select all elements with the class "ac 2 min read How to add a title in anchor tag using jQuery ? In this article, we will see how to add a title in the anchor tag using jQuery. The title property is used to specify extra information about the element. When the mouse moves over the element then it shows the information. The prop() method is used to add properties and values to the element using 2 min read Like