jQuery <h1> add HTML after heading

Description

jQuery <h1> add HTML after heading

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 heading on button click
    $("button.insert-after").click(function(){
        $("h1").after('<img src="image1.png" alt="Symbol">');
    });//w  w  w  .j a  v a 2  s .c  o  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