How to add content to a section using jQuery/JavaScript?-JS Tutorial-php.cn

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

王林

Release： 2023-09-17 11:49:02

forward

1008 people have browsed it

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

We can add content to the section of the website using jQuery's "append" or "prepend" methods. This can be done by selecting the element using jQuery's "selector" method and then adding the required content using the appropriate method. Additionally, we can add content to the 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 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');");

Copy after login

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);

Copy after login

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');");

Copy after login

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>

Copy after login

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!