jQuery <div> add HTML after div container

Description

jQuery <div> add HTML after div container

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inserting HTML Contents Before or After the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    // Add content after a div container on document ready
    $("#container").after("<p>&mdash; The End &mdash;</p>");

   /*from   ww w.  j a va  2  s .  co m*/
});
</script>
<style>
    h1{
        display: inline-block; /* To place marker image and heading in one line */
    }
    body{
        text-align: center;
    }
</style>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <button type="button" class="insert-before">Insert Before</button>
    <button type="button" class="insert-after">Insert After</button>
    <hr>
    <div id="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget.</p>
    </div>
</body>
</html>



PreviousNext

Related