Home >Web Front-end >JS Tutorial >How to add content to a section using jQuery/JavaScript?

How to add content to a section using jQuery/JavaScript?

王林forward: 2023-09-17 11:49:02978browse

如何使用 jQuery/JavaScript 在部分中添加内容？

We can add content to the 93f0f5c25f18dab9d176bd4f6de5d30e section of the website using jQuery's "append" or "prepend" methods. This can be done by selecting the 93f0f5c25f18dab9d176bd4f6de5d30e element using jQuery's "selector" method and then adding the required content using the appropriate method. Additionally, we can add content to the 93f0f5c25f18dab9d176bd4f6de5d30e section using JavaScript's 'innerHTML' attribute.

There are many ways to add content to the head tag programmatically. Today we will discuss 3 of them -

Use jQuery’s .append() method -
Use JavaScript’s document.createElement() method -
Use JavaScript's insertAdjacentHTML() method -

Use these 3 methods to achieve the same task, which is to add content to the d24920cbaa5caf2d2dac816929b26725 tag of an HTML file.

So, let us discuss these methods one by one.

Method 1: Use jQuery’s .append() method

This is a simple one-liner for appending content to any tag in HTML (in our case it will be the head tag) -

$("head").append("alert('hello');");

Method 2: Use JavaScript’s document.createElement() method

We can achieve the same functionality as this using the JavaScript createElement() function and then the appendChild() function -

var script = document.createElement("script");
script.innerHTML = "alert('hello');";
document.getElementsByTagName("head")[0].appendChild(script);

Method 3: Using JavaScript’s insertAdjacentHTML() method

The last method we want to discuss is JavaScript’s insertAdjacentHTML() method -

document.head.insertAdjacentHTML("beforeend", "alert('hello');");

Now that we have discussed all these methods separately, let us use them in a working example.

Example

The complete code is as follows -

<html>
<head>
   <title>Content in head section</title>
</head>
   <body>   
      <h1 style = "color: black;">Welcome to my website</h1>  
   <script src="https://code.jquery.com/jquery-3.6.0.min.js">
   </script>    
      <script>
         // Using jQuery's .append() method
         $("head").append("<link rel='stylesheet' href='styles.css'>");
         // Using JavaScript's document.createElement() method
         var meta = document.createElement("meta");
         meta.name = "description";
         meta.content = "This is my website";
         document.getElementsByTagName("head")[0].appendChild(meta);
      </script>
   </body>
</html>

The above is the detailed content of How to add content to a section using jQuery/JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html append innerHTML 选择器

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to check if an array is a subset of another array using JavaScript?Next article：How to check if an array is a subset of another array using JavaScript?

See more

How to add content to a section using jQuery/JavaScript?

Method 1: Use jQuery’s .append() method

Method 2: Use JavaScript’s document.createElement() method

Method 3: Using JavaScript’s insertAdjacentHTML() method

Example

Related articles