Category Archives: Jquery

Jquery

.insertAfter() method in Jquery

Leave a comment

Description:

The jQuery insertAfter() methods is used to add the contents after the selected elements.

Syntax

  • $(selector).insertAfter(target)

Difference between jQuery after() and insertAfter() 

The main difference between after() and insertAfter() method is their syntax and their placement of the target and content location.

  • after(): $(selector).after(content)
  • insertAFter : $(content).insertAfter(selector)

Example: 

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnClick').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text </div>').insertAfter("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="btnClick">Click to Add content using insertAfter()</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append after the selected div (divcontainer).

Jquery

.before() method in Jquery

Leave a comment

Description:

The jQuery before() method is used to insert content before the selected element.

Syntax

  • $(selector).before(content)
  • $(selector).before(content, function(index))  
Content It specifies the content which need to append.
Function(index) It specifies the function that returns the content which used to insert.

index: Get the index position of the element in the set

Passing Function:

.before() supports passing a function that returns the elements to insert like as below. It can accept any number of additional arguments like prepend(), after().

 $("#divcontainer").before(function () {
     return "<div>Welcome to Dotnet-helpers.com</div>";
  });

Example: 

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#btnClick').click(function () {
 $("#divcontainer").before('<div style="color:#ff0000"> This is Newly added text </div>');
 })
 });
 </script>
</head>
<body>
 <button id="btnClick">Click to Add content using before()</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append befor the selected div (divcontainer).

Jquery

.after() method in Jquery

Leave a comment

Description:

The jQuery after() method is used to insert content after the selected element.

Syntax

  • $(selector).after(content)
  • $(selector).after(content,function(index))
Content It specifies the content which need to append.
Function(index) It specifies the function that returns the content which used to insert.

index: Get the index position of the element in the set

Passing Function:

.after() supports passing a function that returns the elements to insert like as below. It can accept any number of additional arguments.

 $("#divcontainer").after(function () {
     return "<div>Welcome to Dotnet-helpers.com</div>";
  });

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").after('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button id="addMethod">Click to Add content as First Child</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

By clicking the button, “this is Newly added text” will append after the selected div (divcontainer).

 

Jquery

.prependTo() method in Jquery

Leave a comment

Description:

The Jquery prependTo() method is used to add additional content at the beginning of the selected elements. It is same like as prepend() method, it will add content as the first child of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

  • $(content).prependTo(selector)

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text</div>').prependTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button id="addMethod">Click to Add content as First Child</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.prepend() method in Jquery

Leave a comment

Description:

The jQuery prepend() method is used to insert the content in the beginning of the selected elements.It will append the content as the first child of the selected element. It will app It just inverse of append() method.

Syntax

  • $(selector).prepend(content)
  • $(selector).prepend(content, function(index, html))
Content It specifies the content which need to append.
Function(index,html) It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block; 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").prepend('<div style="color:#ff0000"> This is Newly added text');
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.appendTo() method in Jquery

Leave a comment

Description:

The Jquery appendTo() method is used to add additional content at the end of the selected elements. It is same like as append() method, it will add content at the end of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

  • $(content).appendTo(selector)

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text <div/>').appendTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.append() method in Jquery

Leave a comment

Description:

The jQuery append() method is used to insert specified content to the end of the set of matched elements.

Syntax

  • $(selector).append(content)
  • $(selector).append(content, function(index, html))
Content It specifies the content which need to append.
Function (index,html) It specifies the function that returns(HTML string, DOM element(s)) the content to insert.

Index: Returns the index position of the element.

HTML: Returns the current HTML of the selected element.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $("#divcontainer").append('<div style="color:#ff0000"> This is Newly added text', function (index, html) { alert("hi") });
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

Output: 

Jquery

.position() method in Jquery

Leave a comment

Description:

The jquery .position() method Get the current coordinates of the first element for the matched elements, relative to the offset parent. This method does not accept any arguments.

Syntax

  • $(selector).position()

When to use?

The .position() method allows us to retrieve the current position of an element relative to the offset parent. It will be more useful if we need to place a new element near another one within the same container . It returns an object containing the top and left properties as shown below

.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 50px;
 height: 50px;
 background-color: red;
 display:inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 var divBoxDetail = $("#divBoxDetails");
 var position = divBoxDetail.position();
 divBoxDetail.text("left: " + Math.round(position.left) + ", top: " + Math.round(position.top));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">GEt Position</button><br/>
 <div id="divbox1" class="defaultClass">
 </div>
 <br /><br />
 <div id="divBoxDetails"></div>
</body>
</html>

Output: 

 

Jquery

.offset() method in Jquery

Leave a comment

Description:

The offset method will Get the current coordinates of the element for the matched elements, relative to the document. It provides two methods which will set/Get the offset co-ordinates for the selected elements.

Get offset: It will returns the offset co-ordinates of the matched element.

Set offset: It will sets the offset co-ordinates of matched elements.

Syntax

  • GET : $(selector).offset()
  • SET :$(selector).offset({top:value,left:value}) , $(selector).offset(function(index, currentcoordinates))
top:value,left:value It specifies the top and left co-ordinates in pixels for SET.
Function (index,Currentcoordinates) It specifies a function that returns an object containing the top and left coordinates.

Index: It Get the index position for the selected element.

Currentcoordinates: It returns the current coordinates of the selected element.The function should return an object with the new top and left properties.

Difference between postion() and offset():

The .position() method allows us to retrieve the current position of an element relative to the parent. But the .offset() method allows us to retrieve the current position of an element relative to the document.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 80px;
 height: 80px;
 background-color: #1a80b6;
 display: inline-block;
 }
 
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 var divBoxDetail = $("#divBoxDetails");
 var offsetPosition = divBoxDetail.offset();
 divBoxDetail.text("offset left: " + Math.round(offsetPosition.left) + ", offset top: " + Math.round(offsetPosition.top));

 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">GEt Offset Position</button><br/><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <br /><br />
 <div id="divBoxDetails"></div>
</body>
</html>

Output: 

 

Jquery

.outerWidth() method in Jquery

Leave a comment

Description:

The jQuery outerWidth () method is used to GET/SET the outer width for the matched element. This will includes left and right padding but not border/margin.

  • GET outer Width: It will return the outerWidth  for the selected/matched element
  • SET outer Width: It will set the outerWidth  for the selected/matched element

Syntax

  • $(selector).outerWidth()
  • $(selector).outerWidth(value,function(Integer index, Number Width))
Margin It specify the Boolean value to include the element’s margin in the calculation.
  • False:It specifies noot to include the margin. It is a default value.
  • True:It specifies to Include the margin.
Value  It specify the number of pixels or a number along with an optional unit.
function(Integer index,width A function returning the outer width to set. Get the index position of the element in the set and the old outer width as parameter


If includeMargin set to false then the padding and border are included in the calculation; if true then the margin is also included.

Example: 

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .defaultClass {
 border: 5px solid #eed5b7;
 padding: 10px;
 width: 90px;
 height: 50px;
 background-color: red;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('#divCurrentWidth').text(" Box width (no padding) : " + $('#divbox1').width());
 $('#divOuterWidth').text(" Box Outer Width (with top & bottom padding) : " + $('#divbox2').outerWidth(false));
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">SET/GET OuterWidth() CSS property</button><br /><br />
 <div id="divbox1" class="defaultClass">
 </div>
 <div id="divbox2" class="defaultClass">
 </div>
 <br /><br />
 <div id="divCurrentWidth"></div>
 <div id="divOuterWidth"></div>
</body>
</html>

Output: 

Here, width of the box is 90. So width() method will return the same width mentioned the property but innerWidth() method will add the left(10px) , right(10px) padding  and include border as well ( 5+5 = 10). S0 it return 120 as its outerWidth.