Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding Elements in JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 116
    Comment on it

    For adding new HTML elements, following methods are used:
    1)append(). 2)prepend().

    1)append

    This method is used to insert content at the end of the selected elements.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("p").append(" <b>Appended text</b>.");
        });
    
        $("#btn2").click(function(){
            $("ol").append("<li>person</li>");
        });
    });
    </script>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    
    <ol>
      <li>person 1</li>
      <li>person 2</li>
      <li>person 3</li>
    </ol>
    
    <button id="btn1">Append text</button>
    <button id="btn2">Append persons</button>
    
    </body>
    </html>
    

    prepend
    This method is used to insert content at the beginning of the selected elements.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("p").prepend("<b>Prepended text</b>. ");
        });
        $("#btn2").click(function(){
            $("ol").prepend("<li>Evon technologies</li>");
        });
    });
    </script>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    
    <ol>
      <li>Evon 1</li>
      <li>Evon 2</li>
      <li>Evon 3</li>
    </ol>
    
    <button id="btn1">Prepend text</button>
    <button id="btn2">Prepend list item</button>
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: