Knowledge Walls
Ammu
Hyderabad, Andhra Pradesh, India
Passcode:
JQuery
Introduction Syntax Sample JQuery Selectors Events Jquery effects Callback
JQuery [cont'd]
Getandset JQuery - Add Elements JQuery Traversing JQuery Traversing - Ancestors JQuery Traversing - Descendants JQuery Traversing - Siblings JQuery Traversing - Filtering
JQuery [cont'd]
JQuery - AJAX Introduction JQuery - AJAX load() Method Jquery post and get method Format Conflict Filter Has method
JQuery [cont'd]
Before and after Checkbox String vs boolean
JQuery - Add Elements in JQuery of JQuery
1187 Views

Add New HTML Content

We will look at four jQuery methods that are used to add new content:

  • append() - Inserts content at the end of the selected elements
  • prepend() - Inserts content at the beginning of the selected elements
  • after() - Inserts content after the selected elements
  • before() - Inserts content before the selected elements

jQuery Manipulating CSS

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute

jQuery Dimension Methods

jQuery has several important methods for working with dimensions:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
example
<!DOCTYPE html>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>internal</title>
        <script   src="https://code.jquery.com/jquery-3.4.1.min.js"   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="   crossorigin="anonymous"></script>
        <script>
            $(document).ready(function(){
                $("#doit").click(function(){
                   var newmember1= $("<div></div>");
                    newmember1.html(5);
                    var newmember2=$("<div></div>");
                    newmember2.html(6);
                    var newmember3="<div>7</div>";//direct
                    var newmember4=document.createElement("div");//javascript
                    newmember4.innerHTML=8;
                    
                    $("#no").append(newmember1);
                    $("#no").prepend(newmember2);
                    $("#no2").after(newmember3);
                    $("#no2").before(newmember4);
                });
                
                $("#remove").click(function(){
                    
                    $("#no").remove();
                });
                
                  $("#empty").click(function(){
                    
                    $("#no").empty();
                });
                
                
                $("#addclass1").click(function(){
                    
                    $(".addclasses").addClass("addclasses1");
                });
                
                 
                $("#removeclasses").click(function(){
                    
                    $(".addclasses").removeClass("addclasses1");
                    console.log($(".addclasses").height());
                    console.log($(".addclasses").width());
                });
                
                
            });
        </script>
        <style>
            .addclasses1{
             background-color: red;   
            }
            .addclasses{
             width: 300px;
             height: 300px;
             
            }
            
        </style>
    </head>
    <body>
        <div id="no">
            <div>1</div>
            <div>2</div>
        </div>
        <div id="no2">
            <div>3</div>
            <div>4</div>
        </div>
        <button id="doit">do it</button>
        <button id="remove">remove</button>
        <button id="empty">empty</button>
        <button id="addclass1">addclass</button>
        <button id="removeclasses">remove</button>
        <div class="addclasses">element</div>
        
    </body>
</html>
Previous Topics
Previous lessons of current book.
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
Best Lessons of "JQuery"
Top lessons which are viewed more times.
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
JQuery of JQuery
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details