¿Cómo agregar contenido en la sección <head> usando jQuery/JavaScript?

Se puede agregar cualquier contenido a la sección <head> utilizando los siguientes dos enfoques:

  1. Usando la propiedad document.head
  2. 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:
    js-antes
  • Después de agregar un script:
    js-después del script
  • Después de agregar una hoja de estilo:
    js-después de la 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:
    jq-antes
  • Después de agregar un script:
    jq-después de la secuencia de comandos
  • Después de agregar una hoja de estilo:
    jq-después de la 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *