极客教程如何使用jQuery/JavaScript在head部分添加内容
可以使用以下两种方法将任何内容添加到
部分：- 使用 document.head 属性
- 使用jQuery选择head元素
方法1：使用document.head属性。
document的head属性返回文档的head元素。可以使用 appendChild() 方法将新内容添加到该元素中。可以使用 createElement() 方法创建要添加的内容，并可以为其指定所需的属性。appendChild()方法将此创建的元素追加到文档的head部分。语法：
document.head.appendChild( elementToAdd );
示例：
<!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>
输出:
方法2：使用jQuery选择head元素。
可以使用jQuery选择器选择文档的head属性。可以使用 append() 方法将新的内容添加到这个选定的元素中。要添加的内容可以使用 createElement() 方法首先创建。然后， append() 方法将该创建的元素追加到选定的元素末尾，也就是追加到head中。
语法:
$('head').append( elementToAdd );
示例：
<!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>
输出:
