使用jQuery如何在head中添加内容
任何内容都可以通过以下两种方式添加到该
部分。- 使用document.head属性
- 使用jQuery选择头部元素
方法1:使用document.head属性:文档的head属性返回文档的头部元素。任何新的内容都可以通过使用appendChild()方法添加到这个元素。要添加的内容可以首先使用createElement()方法来创建,并将所需的属性分配给它。appendChild()方法将这个创建的元素追加到文档的头部。
语法:
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选择头部元素:可以使用jQuery选择器选择文档的头部属性。新的内容可以通过使用append()方法添加到这个选定的元素中。要添加的内容可以首先使用createElement()方法创建。然后,append()方法将这个创建的元素添加到所选元素的最后,也就是头部。
语法:
$('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>
输出:
- 在点击按钮之前。
- 在添加一个脚本之后。
- 在添加一个样式表之后。