Three simple, but useful, jQuery methods for DOM manipulation are:

1. text() - Sets or returns the text content of selected elements
2. html() - Sets or returns the content of selected elements (including HTML markup)
3. val() - Sets or returns the value of form fields
4. attr() method is used to get attribute values
5. addAttr() method is used to add attribute values
6. removeAttr() method is used to remove attribute values

Example

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

$("button").click(function(){
  alert($("#w3s").addAttr("href","www.yahoo.com"));
});

$("button").click(function(){
  alert($("#w3s").removeAttr("href"));
});

jQuery - Add Elements

With jQuery, it is easy to add new elements/content.

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

1. append() - Inserts content at the end of the selected elements
2. prepend() - Inserts content at the beginning of the selected elements
3. after() - Inserts content after the selected elements
4. before() - Inserts content before the selected elements

Example

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
} 

$("img").after("Some text after");

$("img").before("Some text before");

jQuery - Remove Elements

jQuery, it is easy to remove existing HTML elements.

To remove elements and content, there are mainly two jQuery methods:

1. remove() - Removes the selected element (and its child elements)
2. empty() - Removes the child elements from the selected element

Example

$("#div1").remove();
$("#div1").empty(); 

jQuery - Get and Set CSS Classes

With jQuery, it is easy to manipulate the style of elements.

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

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

Example

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important blue");
}); 


$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

$("p").css("background-color");

$("p").css("background-color", "yellow");

jQuery - Dimensions

With jQuery, it is easy to work with the dimensions of elements and browser window.

jQuery has several important methods for working with dimensions:

1. width()
2. height()
3. innerWidth()
4. innerHeight()
5. outerWidth()
6. outerHeight()

Example

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "
";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
}); 

$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "
";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
}); 

$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "
";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});