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>
  <p>$199</p>

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:

$(document).ready(function(){
  var price = $('<p>$199</p>');
  $('.vacation').append(price);
  $('button').remove();
})

 

by