Skip to content

JQuery Add Example

CODEPEN

Jquery Add Example

HTML AND JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container">
        <button id="append" class="btn btn-secondary">Append</button>
        <button id="prepend"  class="btn btn-secondary">Prepend</button>
        <button id="before"  class="btn btn-secondary">Before</button>
        <button id="after"  class="btn btn-secondary">After</button><br>

        <p class="bg-light text-dark" id="result">Result</p>
    </div>

<script>

    $(document).ready(function(){
        $("#append").click(function(){
            $("#result").append("<br> (this is a append)")
        })
        $("#prepend").click(function(){
            $("#result").prepend("(this is a prepend) <br>")
        })
        $("#before").click(function(){
            $("#result").before("(this is a before) <br>")
        })
        $("#after").click(function(){
            $("#result").after("(this is a after) <br>")
        })
    })


</script>


</body>
</html>

CSS

body{
    padding: 20px;
}
#txt{
    margin-bottom: 20px;
}
#result{
    margin-top: 20px;
    padding: 10px;
    border-radius: 10px;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: