jQuery Add

jQuery has various methods for inserting new content into an existing element, such as append(), prepend(), html(), text(), before(), after(), wrap(), and so on.

jQuery append() Method

To put material to the end of the chosen elements, use the jQuery append() function. On document ready, the following example will add some HTML to all the paragraphs, however on button click, it will append some text to the container element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Add HTML Contents At the End of the Elements</h1>
<button class="btnAppend">Click me</button>
<p>Welcome to  </p>

<script>
    $(document).ready(function(){
        $(".btnAppend").click(function(){
            $("p").append("<b>webtutor.dev </b>");
        });
    });
</script>
</body>
</html>

Preview

jQuery prepend() Method

The prepend() function inserts material at the start of the specified components. On document ready, the following example will prepend some HTML to all the paragraphs, however on button click, it will prepend some text to the container element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Add HTML Contents At the Start of the Elements</h1>
<button class="btnPrepend">Click me</button>
<p>  <b>webtutor.dev</b></p>

<script>
    $(document).ready(function(){
        $(".btnPrepend").click(function(){
            $("p").prepend("Welcome to");
        });
    });
</script>
</body>
</html>

Preview

Add Multiple Elements with append() & prepend() Method

The jQuery add() and prepend() functions also accept multiple parameters as input. The jQuery code in the following example will add a ,<h1>, <p>, and <image> element as the final three child nodes inside the <body> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Append or Prepend Multiple Elements</h1>
<button class="btnAppend">Click me</button><br><br>

<script>
    $(document).ready(function(){
        $(".btnAppend").click(function(){
            let logo = ('<img src="https://webtutor.dev/images/webtutor.png" height="60" alt="WebTutor">');
            let name = "<h1>Webtutor.dev</h1>";
            $("body").append(logo, name)
        });
    });
</script>
</body>
</html>

Preview

jQuery before() Method

To put material before the chosen components, use the jQuery before() technique. On document ready, the following example will put a paragraph before the container element, and on button click, it will place an image before the <h1> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Add HTML Contents Before the Elements</h1>
<button class="btnBefore">Click me</button><br><br>
<span> Welcome to WebTutor</span>

<script>
    $(document).ready(function(){
        $(".btnBefore").click(function(){
            $("span").before(" 😍 💗 ");
        });
    });
</script>
</body>
</html>

Preview

jQuery after() Method

The after() function of jQuery is used to inject material after the chosen components. On document ready, the following example will insert a paragraph after the container element, and on button click, it will insert an image after the <h1> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Add HTML Contents After the Elements</h1>
<button class="btnAfter">Click me</button><br><br>
<span>Welcome to WebTutor </span>

<script>
    $(document).ready(function(){
        $(".btnAfter").click(function(){
            $("span").after(" 😍 💗 ");
        });
    });
</script>
</body>
</html>

Preview

Add Multiple Elements with before() & after() Method

The jQuery before() and after() functions also accept multiple parameters as input. The example below will place a <h1>, <p>, and an <image> element before the <p> elements.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Before or After Multiple Elements</h1>
<button class="btnBefore">Click me</button><br><br>

<script>
    $(document).ready(function(){
        $(".btnBefore").click(function(){
            let logo = ('<img src="https://webtutor.dev/images/webtutor.png" height="60" alt="WebTutor">');
            let name = "<h1>Webtutor.dev</h1>";
            $("button").before(logo, name)
        });
    });
</script>
</body>
</html>

Preview

jQuery wrap() Method

The jQuery wrap() function is used to encircle the chosen items in an HTML structure. On document ready, the jQuery code in the following example will cover the container elements with a <div> element with the class. wrapper, while wrapping all the inner content of the paragraph elements first with the <b> and then with the <em> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Wrap HTML Around the Elements</h1>
<button class="btnWrap">Click me</button><br><br>
<p> Welcome to WebTutor</p>

<script>
    $(document).ready(function(){
        $(".btnWrap").click(function(){
            $("p").wrap("<em><b></b></em>");
        });
    });
</script>
</body>
</html>

Preview

jQuery Set

jQuery Remove

jQuery Add

jQuery append() Method

Example

jQuery prepend() Method

Example

Add Multiple Elements with append() & prepend() Method

Example

jQuery before() Method

Example

jQuery after() Method

Example

Add Multiple Elements with before() & after() Method

Example

jQuery wrap() Method

Example

Links

Tutorials

Connect with us