Se puede agregar cualquier contenido a la sección <head> utilizando los siguientes dos enfoques:
- Usando la propiedad document.head
- Seleccionar el elemento principal usando jQuery
Método 1: usar la propiedad document.head: la propiedad head del documento devuelve el elemento head del documento. Cualquier contenido nuevo se puede agregar a este elemento mediante el método appendChild() . El contenido que se agregará se puede crear primero usando el método createElement() y se le pueden asignar las propiedades requeridas. El método appendChild() agrega este elemento creado al encabezado del documento.
Sintaxis:
document.head.appendChild( elementToAdd );
Ejemplo:
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de agregar un script:
- Después de agregar una hoja de estilo:
Método 2: Seleccionar el elemento de encabezado usando jQuery: La propiedad de encabezado del documento se puede seleccionar usando un selector de jQuery. El nuevo contenido se puede agregar a este elemento seleccionado usando el método append() . El contenido que se agregará se puede crear primero usando el método createElement() . El método append() luego agrega este elemento creado al final del elemento seleccionado, es decir, al encabezado.
Sintaxis:
$('head').append( elementToAdd );
Ejemplo:
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de agregar un script:
- Después de agregar una hoja de estilo:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA