Jquery Add Element
Advertisements
Add Element
Jquery have some predefined methods to add new elements or contents. It have following methods that are used to add new content;
- append()
- prepend()
- after()
- before()
append() method
This method are used to inserts content at the end of the selected elements
Example of append()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Appended text</b>.");
});
});
</script>
</head>
<body>
<p>This is my first program.</p>
<button>Append Text</button>
</body>
</html>
Output
This is my first program.
prepend() method
This method are used to inserts content at the beginning of the selected elements.
Example of prepend()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").prepend(" <b>Appended text</b>.");
});
});
</script>
</head>
<body>
<p>This is my first program.</p>
<button>Append Text</button>
</body>
</html>
Output
This is my first program.
before() method
This method are used to inserts content before the selected elements.
Example of before()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").before(" <b>Text Add Before</b>.");
});
});
</script>
</head>
<body>
<p>This is my first program.</p>
<button>Insert Text</button>
</body>
</html>
Output
This is my first program.
after() method
This method are used to inserts content after the selected elements.
Example of after()
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after(" <b>Text Add After</b>.");
});
});
</script>
</head>
<body>
<p>This is my first program.</p>
<button>Insert Text</button>
</body>
</html>
Output
This is my first program.
Google Advertisment