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>
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.
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>
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
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.
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.
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.
The jQuery outerHeight () method is used to GET/SET the inner width for the matched element. This will includes the top and bottom padding and border are always included in the .outerHeight() calculation. If the include Margin argument is set to true, the margin (top and bottom) is also included.
GET Outer height: It will return the outerHeight for the selected/matched element
SET Outer height: It will set the outerHeight for the selected/matched element
Syntax
$(selector).outerHeight()
$(selector).outerHeight( includeMargin )
$(selector).outerHeight(value)
$(selector).outerHeight(value,function(Integer index, Number Width))
includeMargin
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,height
A function returning the outer height to set. Get the index position of the element in the set and the old outer height as parameter
Here, height of the box is 50. So height() method will return the same as height mentioned as property but outerWidth() method will add the left(10px) , right(10px) padding and border 10(5+5) and return 80 as its outer height.
The jQuery innerWidth () method is used to GET/SET the inner width for the matched element. This will includes left and right padding but not border/margin.
GET Inner Width: It will return the InnerWidth for the selected/matched element
SET Inner Width: It will set the InnerWidth for the selected/matched element
Syntax
$(selector).InnerWidth()
$(selector).InnerWidth(value)
$(selector).InnerWidth(value,function(Integer index, Number Width))
Value
It specify the number of pixels or a number along with an optional unit.
function(Integer index,Number height
A function returning the inner height (including padding but not border) to set. The index will return the position of the element for the matched element and the Previous inner Width as arguments.
When calling .innerWidth(“value”), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.
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 return 110 as its innerWidth.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
