LearnKode

4 Example(s) of JQuery Add


Description :

The add() method is used to add element to the existing group of elements.

This example adds the same css style for both p and span elements with the existing h1 element.


JQuery Add Example - 1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h1").add("p").add("span").css("background-color", "cyan");
});
</script>

</head>
<body>

<h1>Welcome to india</h1>
<p>please Add paragraph.</p>
<p>Another p element.</p>

<span>A span element.</span>
<span>A span element.</span><br><br>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example The clone() method makes a copy of selected elements, including child nodes, text and attributes.


JQuery Add Example - 2 
<!doctype html>
<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
 
<p>Appwrk IT Solution</p>
 
<script>
$( "p" ).clone().add( "<span>LearnKode</span>" ).appendTo( document.body );
</script>
 
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we are add javascript element with css() method and this will be change the background color of text


JQuery Add Example - 3 
<!Doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
 
<h1>Appwrk IT Solution</h1>
<span id="span1" style="font-size: 30px">Best software company!</span>
 
<script>
$( "h1" ).add( document.getElementById( "span1" ) ).css( "background", "cyan" );
</script>
 
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we will use add() method to apply and remove css using click() method.


JQuery Add Example - 4 
<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <script>
    
        function styleToggle(button) {
            if (button.value == 'Add Style') {     
                $('span').add('p').addClass('styled').add('li').css({'background-color': 'fuchsia', 'font-family':' lucida sans'});
                button.value = 'Remove Style';
            } 
            else {    
                $('span').add('p').add('li').removeClass('styled').removeAttr('style');
                button.value = 'Add Style';
            }

            $().add("<br /><br><strong>Appwrk Information</strong>").appendTo("p:last");
        }
    </script>
    
    </head>
    <body>
        <h1 style="color: purple">Employee Table</h1>
        
      <span>APPWRK IT Solutions is a complete Web Solutions Company offering customer-oriented web design services and more importantly, deliver them effectively. We can serve you well because we have the best combination of affordability and quality. With our company solutions, we add efficiency to your operations; increase the visibility of your online presence to expand your reach, offer innovative digital learning solutions to improve your team performance.</span>
        <ul>
            <li>appwrk 1</li>
            <li>appwrk 2</li>
            <li>appwrk 3</li>
        </ul>
        <p>We are breathing in a planet where almost everything adjacent to us is technology driven. Be it designing, drafting, deploying, marketing, profits maximization or any other business process all are technology driven.</p>
        
        <p>Mobile phones have become synonymous with people's lifestyles. Our mobile application developers understand the customer's needs and solutions for all mobile devices.</p>
        <br />
        <input type="button" value="Add Style" onclick="styleToggle(this)"></input>
    
    
    </body>
    
    </html>
Try it » Download Example »

Output