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.