Usage analysis of append of and appendto of in jquery

2020-03-30 04:18:41
OfStack

This article illustrates the use of append() and appendto() in jquery. Share with you for your reference. Specific analysis is as follows:

In jQuery's document manipulation methods, the append() and appentto() methods perform the same tasks, but they differ.

1. Append () method: Inserts the specified content at the end of the selected element (but still inside the element).

A. grammar:

$(selector).append(content);

Where the parameter content is required, specifying what to attach.

B. Append can use function to add content to the selected element. The syntax is:

$(selector).append(function(index,html));

Where function() is required and the parameters index and HTML are optional. Index represents the index position of the receiving selector, and HTML represents the current HTML of the receiving selector.

Example:

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("button").click(function(){  

    $("p").append(" <b>Hello jQuery!</b>");  

  });  

});  

</script>  

</head>  

<body>  

<p>This is a paragraph.</p>  

<p>This is another paragraph.</p>  

<button> At the end of each  p  Add content at the end of the element </button>  

</body>  

</html>

The operation results are as follows:

Paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!

2. Appendto () method: Inserts the specified content at the end of the selected element (but still inside the element). You cannot use functions to attach content.

Grammar:

$(content).appendto(selector);

Example:

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("button").click(function(){  

    $("<b> Hello jQuery!</b>").appendTo("p");  

  });  

});  

</script>  

</head>  

<body>  

<p>This is a paragraph.</p>  

<p>This is another paragraph.</p>  

<button> At the end of each  p  Add content at the end of the element </button>  

</body>  

</html>

The operation results are as follows:

Paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!