The jQuery append() method is very useful if we want to append some content to our web page by clicking on a particular button, div or any html element .
The jQuery append() method appends the content at the end of the element which we have been selected.
Syntax
selector.append( content )
selector − it is used to select html elements in which jquery has to be applied by using either id , class or html elements.
content :-This parameter contains the content which we want to add after our selected element.
Below is html code for jquery append() method example.
<p>Click on any square below to see the result:</p>
<div class = "demo" style = "background-color:#80B553;"></div>
<div class = "demo" style = "background-color:#0074D3;"></div>
<div class = "demo" style = "background-color:#EF748A;"></div>
Below is jquery append method() code :-
<script>
$(document).ready(function() {
$(".demo").click(function () {
$(this).append('<div class = "demo"></div>' );
});
});
</script>
Below is Css for above html code :-
.demo{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
working demo:- https://jsfiddle.net/rjry210y/11/
In above example when we have clicked on any box then the div get appended to the box in which we have click.
0 Comment(s)