使用jQuery如何在head中添加内容

使用jQuery如何在head中添加内容

任何内容都可以通过以下两种方式添加到该部分。

  1. 使用document.head属性
  2. 使用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>

输出:

  • 在点击按钮之前。
    使用jQuery如何在head中添加内容
  • 在添加一个脚本之后。
    使用jQuery如何在head中添加内容
  • 在添加一个样式表之后。
    使用jQuery如何在head中添加内容

方法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>

输出:

  • 在点击按钮之前。
    使用jQuery如何在head中添加内容
  • 在添加一个脚本之后。
    使用jQuery如何在head中添加内容
  • 在添加一个样式表之后。
    使用jQuery如何在head中添加内容

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程