Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add content in section using jQuery/JavaScript?
Adding content to the <head> section dynamically is useful for loading CSS, JavaScript, or meta tags after page load. jQuery and JavaScript provide several methods to accomplish this task programmatically.
There are three main approaches to add content to the head section:
Using jQuery's .append() method
Using JavaScript's document.createElement() method
Using JavaScript's insertAdjacentHTML() method
Let's explore each approach with working examples.
Using jQuery's .append() Method
jQuery's append() method provides a simple way to add content to the head section:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Append Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Adding CSS with jQuery</h1>
<p id="demo">This text will be styled after adding CSS</p>
<script>
// Add CSS to head section
$("head").append("<style>#demo { color: blue; font-size: 18px; }</style>");
// Add meta tag
$("head").append("<meta name='author' content='Tutorial Author'>");
console.log("Content added to head using jQuery");
</script>
</body>
</html>
Using JavaScript's document.createElement() Method
The createElement() method provides more control over element creation and attributes:
<!DOCTYPE html>
<html>
<head>
<title>createElement Example</title>
</head>
<body>
<h1>Adding Elements with createElement</h1>
<p id="content">This will be styled dynamically</p>
<script>
// Create and add a style element
var style = document.createElement("style");
style.innerHTML = "#content { background-color: yellow; padding: 10px; }";
document.getElementsByTagName("head")[0].appendChild(style);
// Create and add a meta tag
var meta = document.createElement("meta");
meta.name = "description";
meta.content = "Dynamic content addition example";
document.head.appendChild(meta);
console.log("Elements created and added to head");
</script>
</body>
</html>
Using JavaScript's insertAdjacentHTML() Method
The insertAdjacentHTML() method allows inserting HTML at specific positions:
<!DOCTYPE html>
<html>
<head>
<title>insertAdjacentHTML Example</title>
</head>
<body>
<h1>Using insertAdjacentHTML</h1>
<div id="test">This div will get border styling</div>
<script>
// Add CSS using insertAdjacentHTML
document.head.insertAdjacentHTML("beforeend",
"<style>#test { border: 2px solid red; margin: 10px; }</style>"
);
// Add viewport meta tag
document.head.insertAdjacentHTML("afterbegin",
"<meta name='viewport' content='width=device-width, initial-scale=1'>"
);
console.log("HTML inserted into head section");
</script>
</body>
</html>
Comparison
| Method | Requires jQuery? | Element Control | Best For |
|---|---|---|---|
| jQuery .append() | Yes | Basic | Simple HTML strings |
| document.createElement() | No | Full control | Complex elements with attributes |
| insertAdjacentHTML() | No | Position control | HTML strings with position control |
Complete Example
Here's a comprehensive example demonstrating all three methods:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Head Content</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Dynamic Head Content Example</h1>
<p id="jquery-demo">jQuery styled content</p>
<p id="js-demo">JavaScript styled content</p>
<p id="insert-demo">insertAdjacentHTML styled content</p>
<script>
// Method 1: jQuery append
$("head").append("<style>#jquery-demo { color: green; font-weight: bold; }</style>");
// Method 2: createElement
var style = document.createElement("style");
style.innerHTML = "#js-demo { color: blue; text-decoration: underline; }";
document.head.appendChild(style);
// Method 3: insertAdjacentHTML
document.head.insertAdjacentHTML("beforeend",
"<style>#insert-demo { color: red; font-style: italic; }</style>"
);
console.log("All methods demonstrated successfully");
</script>
</body>
</html>
Conclusion
All three methods effectively add content to the head section. Use jQuery's append() for simplicity, createElement() for full control over element properties, and insertAdjacentHTML() when you need precise positioning control.
2K+ Views
