Home    Articles


Introduction to jQuery part. 3


Here he have some HTML code:

<li class="vacation">
  <h3>Romania Vacation</h3>
  <button type="button">Find the price!</button>

What if we want find out the price for our vacation? We must append a new DOM node, and remove one.

$(document).ready(function() {
// create a <p> node with the price
// remove a <buttom>

Creating a node using jQuery:

var price = $('<p>From $399.99</p>');

There are several methods to add a node into the DOM: .append(); .prepend(); .after(); .before();

We are going to use the append method, then remove the node on which our price we want to show over. And the code is going to look like this:

  var price = $('<p>$199</p>');