DOM manipulation

Although we may be building our applications in HTML, we still have the ability to alter and manipulate the elements within the document to create a more dynamic application.

How to do it...

We will use the DOM manipulation methods available in the XUI library to read and write content directly within our application:

1. Firstly, create a new PhoneGap project named dom by running the following line:

   phonegap create dom com.myapp.dom dom
   

2. Add the devices platform. You can choose to use Android, iOS, or both:

   cordova platform add ios
   cordova platform add android
   

3. Open www/index.html. Let's clean up the unnecessary elements. Include a reference to the XUI JavaScript library, the Cordova JavaScript file, and an empty script tag block before the closing head tag.

4. Within the empty script block, define a new onLoad method.

5. Add an on event handler. It will run the onLoad JavaScript method when the DOM has fully loaded.

6. The body of the document will contain a div element with the id attribute...