The appendTo() method in jQuery is used to insert HTML elements at the end of the selected elements.SyntaxThe syntax is as follows −$(content).appendTo(selector)Above, content is the content to be inserted.ExampleLet us now see an example to implement the jQuery appendTo() method −    $(document).ready(function(){       $("button").click(function(){          $("New").appendTo("h3");       });    }); Blog Posts How to install Java? How to install Ruby? Click me to check new and old post status OutputThis will produce the following output −Now, click on the button above −

The event.which property in jQuery is used to return which keyboard key or mouse button was pressed for the event.SyntaxThe syntax is as follows −event.whichExampleLet us now see an example to implement the jQuery event.which property −    $(document).ready(function(){       $("input").keydown(function(event){          $("div").html("Which key pressed? = " + event.which);       });    }); Student Details Student Name: Student Address: Note: The key pressed in the any of the above input would be visible below. OutputThis will produce the following output −Let us now enter a value and press a key in the input −

The event.type property in jQuery is used to return which event type was triggered.SyntaxThe syntax is as follows −event.typeExampleLet us now see an example to implement the jQuery event.type property −    .demo {       color: blue;       background-color: orange;    }    .test {       color: white;       background-color: black;    }    $(document).ready(function(){       $("p").on("click dblclick mouseover", function(event){          $("div").html(event.type+" event");       });    }); Heading Two Click here and let's see whether it ... Read More

The event.timeStamp property in jQuery is used to return the number of milliseconds since January 1, 1970, when the event is triggered.SyntaxThe syntax is as follows −event.timeStampExampleLet us now see an example to implement the jQuery event.timeStamp property −    .demo {       color: white;       background-color: black;    }    $(document).ready(function(){       $("button").click(function(event){          $("span").text(event.timeStamp);       });    }); Milliseconds January 1, 1970 Event occurred 0 milliseconds after January 1, 1970. Milliseconds OutputThis will produce the following output −Click on the button “Milliseconds” above −

The event.result property in jQuery has the last/previous value returned by an event handler triggered by the specified event.SyntaxThe syntax is as follows −event.resultExampleLet us now see an example to implement the jQuery event.result property −    .demo {       color: orange;       background-color: black;    }    $(document).ready(function(){       $("button").click(function(){          return "New text generated!";       });       $("button").click(function(event){          $("p").html(event.result);       });    }); Heading Two Click me This is a demo line. OutputThis will produce the following output. This is before clicking the button −Click the button above −

The event.relatedTarget property in jQuery is used to return which element being entered or exited on mouse movement.SyntaxThe syntax is as follows −event.relatedTargetExampleLet us now see an example to implement the jQuery event.relatedTarget property −    .demo {       border:2px solid yellow;    }    $(document).ready(function(){       $("div, p").mouseenter(function(event){          $("#demo").html("Related target = " + event.relatedTarget.nodeName);       });    }); Demo Heading This is a demo text. This is a demo line. OutputThis will produce the following output −Now, place the mouse cursor inside the div (box) −

The event.pageY property in jQuery is used to return the position of the mouse pointer, relative to the top edge of the document.SyntaxThe syntax is as follows −event.pageYExampleLet us now see an example to implement the jQuery event.pageY property −    $(document).ready(function(){       $(document).mousemove(function(event){          $("span").text("X: " + event.pageX + ", Y: " + event.pageY);       });    }); Mouse Pointer Position Mouse pointer position coordinates = Place mouse cursor anywhere on the document OutputThis will produce the following output. Before placing mouse cursor on the document −After placing mouse cursor anywhere on the document −

The event.pageX property in jQuery is used to return the position of the mouse pointer, relative to the left edge of the document.SyntaxThe syntax is as follows −event.pageXExampleLet us now see an example to implement the jQuery event.pageX property −    $(document).ready(function(){       $(document).mousemove(function(event){          $("span").text("X: " + event.pageX + ", Y: " + event.pageY);       });    }); Mouse Pointer Position Mouse pointer position coordinates = Place mouse cursor anywhere on the document OutputThis will produce the following output. Before placing mouse cursor on the document −After placing mouse cursor anywhere on the document − 

The event.namespace property in jQuery is used to return the custom namespace when the event was triggered.SyntaxThe syntax is as follows −event.namespaceExampleLet us now see an example to implement the jQuery event.namespace property −    $(document).ready(function(){       $("p").on("custom.demoNamespace", function(event){          alert(event.namespace);       });       $("p").click(function(event){          $(this).trigger("custom.demoNamespace");       });       $("button").click(function(){          $("p").off("custom.demoNamespace");       });    }); Demo Heading This is demo paragraph. This is demo paragraph. Remove namespace Click on any ... Read More

The event.delegateTarget property in jQuery is used to return the element where the currently-called jQuery event handler was attached.SyntaxThe syntax is as follows −event.delegateTargetExampleLet us now see an example to implement the jQuery event.delegateTarget property −    $(document).ready(function(){       $("div").on("click", "button", function(event){          $(event.delegateTarget).css("color", "red");       });    }); Demo Heading Change color by clicking on below button. This is demo text. Click to change color OutputThis will produce the following output −Above, click on the button to change the text color −