English 中文(简体)
jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Add Elements
  • 时间：2024-12-22

jQuery - Add Elements

Previous Page Next Page  

jQuery provides various methods to add new DOM elements in the existing HTML document. You can add these new elements at various locations (before, after any of the existing tags) based on your requirements.

jQuery append() Method

The jQuery append() method adds the content at the end of the matched each element(s). You can also append multiple elements in a single function call.

Following is the syntax of the append() method:

$(selector).append(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<span class="container">
   <h2>jQuery append() Method</h2>
   <span class="inner">Hello</span>
   <span class="inner">Goodbye</span>
</span>

Now if we apply the append() method as follows:

$( ".inner" ).append( "<p>Zara</p>" );

It will produce following result:

<span class="container">
   <h2>jQuery append() Method</h2>
   <span class="inner">Hello
   <p>Zara</p>
   </span>
   <span class="inner">Goodbye
   <p>Zara</p>
   </span>
</span>

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $(".inner").append("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery append() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery appendTo() Method

The jQuery appendTo() method performs the same task as done by appendTo(). The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the appendTo() method:

$(content).appendTo(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $("<p>Zara</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery appendTo() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery after() Method

The jQuery after() method adds the content after the matched each element(s). You can also insert multiple elements in a single function call.

Following is the syntax of the after() method:

$(selector).after(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<span class="container">
   <h2>jQuery after() Method</h2>
   <span class="inner">Hello</span>
   <span class="inner">Goodbye</span>
</span>

Now if we apply the after() method as follows:

$( ".inner" ).after( "<p>Zara</p>" );

It will produce following result:

<span class="container">
   <h2>jQuery after() Method</h2>
   <span class="inner">Hello</span>
   <p>Zara</p>
   <span class="inner">Goodbye</span>
   <p>Zara</p>
</span>

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $(".inner").after("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery after() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertAfter() Method

The jQuery insertAfter() method adds the content after the matched each element(s). The after() and insertAfter() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the after() method:

$(content).insertAfter(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $("<p>Zara</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery insertAfter() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prepend() Method

The jQuery prepend() method adds the content at the beginning of the matched each element(s). You can also prepend multiple elements in a single function call.

Following is the syntax of the append() method:

$(selector).prepend(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<span class="container">
   <h2>jQuery prepend() Method</h2>
   <span class="inner">Hello</span>
   <span class="inner">Goodbye</span>
</span>

Now if we apply the prepend() method as follows:

$( ".inner" ).prepend( "<p>Zara</p>" );

It will produce following result:

<span class="container">
   <h2>jQuery prepend() Method</h2>
   <span class="inner">
   <p>Zara</p>
   Hello
   </span>
   <span class="inner">
   <p>Zara</p>
   Goodbye
   </span>
</span>

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $(".inner").prepend("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery prepend() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery prependTo() Method

The jQuery prependTo() method perform the same task as done by prepend(). The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the prependTo() method:

$(content).prependTo(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $("<p>Zara</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery prependTo() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery before() Method

The jQuery before() method adds the content before the matched each element(s). You can also insert multiple elements in a single function call.

Following is the syntax of the before() method:

$(selector).before(content, [content]);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Synopsis

Consider the following HTML content:

<span class="container">
   <h2>jQuery before() Method</h2>
   <span class="inner">Hello</span>
   <span class="inner">Goodbye</span>
</span>

Now if we apply the before() method as follows:

$( ".inner" ).before( "<p>Zara</p>" );

It will produce following result:

<span class="container">
   <h2>jQuery before() Method</h2>
   <p>Zara</p>
   <span class="inner">Hello</span>
   <p>Zara</p>
   <span class="inner">Goodbye</span>
</span>

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $(".inner").before("<p>Zara</p>");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery before() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery insertBefore() Method

The jQuery insertBefore() method adds the content before the matched each element(s). The before() and insertBefore() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target.

Following is the syntax of the after() method:

$(content).insertBefore(selector);

Here content parameter could be a HTML string, a DOM element, text node, array of elements and text nodes or jQuery object to insert at the end of each element in the set of matched elements.

Example

Let s try the following example and verify the result: 

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").cpck(function(){
         $("<p>Zara</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <span class="container">
      <h2>jQuery insertBefore() Method</h2>
      <span class="inner">Hello</span>
      <span class="inner">Goodbye</span>
   </span>
   <br>
   
   <button>Add Text</button>
</body>
</html>

jQuery HTML/CSS Reference

You can get a complete reference of all the jQuery Methods to manipulate CSS and HTML content at the following page: jQuery HTML/CSS Reference.

Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全