Adding and removing element

Functions

Objects

Array Properties and Methods

DOM

Built-in Objects

Using Events in JavaScript

Handling Input and Output

Ajax and JSON

Creating and appending elements

To create a new element in an HTML document, use the document.createElement() method. When you use createElement(), a new beginning and end tag of the type you specify will be created. Listing 10-8 shows an example of how you can use this method to dynamically create a list in an HTML document from an array.

Removing elements

For all the great things that it lets you do with HTML documents, the HTML DOM is not highly regarded by professional JavaScript programmers. It has a number of oddities and tends to make some things more difficult than they should be.

One of the big faults with the DOM is that it doesn’t provide any way to directly remove an element from a document. Instead, you have to tell the DOM to find the parent of the element you want to remove and then tell the parent to remove its child. It sounds a little confusing, but Listing 10-9 should clear it all up.

When you run Listing 10-9 in a browser and press the button, the onclick event calls the removeFirstParagraph() function. The first thing removeFirstParagraph() does is to select the element that we actually want to remove, the element with the id = “firstparagraph”. Then, the script selects the parent node of the first paragraph. It then uses the removeChild() method to remove the first paragraph.

Examples

Create a h1 element using the createElement method and put the text “hello World” into it.

<html>
  <head></head>
  <body>
    <div id='d1'></div>
    <script>
      var div = document.getElementById('d1');
      var h1 = document.createElement('h1');
      h1.innerHTML = 'Hello world';
      div.appendChild(h1);
    </script>
  </body>
</html>

Hello world

Create an unordered list and add a list of fruit names to it.

<html>
  <head></head>
  <body>
    <div id="d1"></div>
    <script>
      var div = document.getElementById('d1');
      var ul = document.createElement('ul');

      var li1 = document.createElement('li');
      li1.innerHTML = 'Apple';
      ul.appendChild(li1);

      var li2 = document.createElement('li');
      li2.innerHTML = 'Mango';
      ul.appendChild(li2);

      var li3 = document.createElement('li');
      li3.innerHTML = 'Banana';
      ul.appendChild(li3);

      var li4 = document.createElement('li');
      li4.innerHTML = 'Pineapple';
      ul.appendChild(li4);

      div.appendChild(ul);
    </script>
  </body>
</html>

Apple
Mango
Banana
Pineapple

Take an array of flower names and create h1 elements for each flower of the array.

<html>
  <head></head>
  <body>
    <div id="d1"></div>
    <script>
      var div = document.getElementById('d1');
      var flowers = ['Rose', 'Lily', 'Lotus', 'Marigold'];
      for (var i = 0; i <= flowers.length - 1; i++) {
        var h1 = document.createElement('h1');
        h1.innerHTML = flowers[i];
        div.appendChild(h1);
      }
    </script>
  </body>
</html>

Rose

Lily

Lotus

Marigold

Create a table displaying the name and age of three persons using DOM

<html>
  <head></head>
  <body>
    <div id='d1'></div>
    <script>
      var div = document.getElementById('d1');
      var table = document.createElement('table');
      table.setAttribute('border',1);

      var tr1 = document.createElement('tr');
      var th1 = document.createElement('th');
      th1.innerHTML = 'Name';
      tr1.appendChild(th1);
      var th2 = document.createElement('th');
      th2.innerHTML = 'Age';
      tr1.appendChild(th2);
      table.appendChild(tr1);

      var tr2 = document.createElement('tr');
      var td1 = document.createElement('td');
      td1.innerHTML = 'Tom';
      tr2.appendChild(td1);
      var td2 = document.createElement('td');
      td2.innerHTML = 26;
      tr2.appendChild(td2);
      table.appendChild(tr2);

      var tr3 = document.createElement('tr');
      var td3 = document.createElement('td');
      td3.innerHTML = 'Harry';
      tr3.appendChild(td3);
      var td4 = document.createElement('td');
      td4.innerHTML = 28;
      tr3.appendChild(td4);
      table.appendChild(tr3);

      var tr4 = document.createElement('tr');
      var td5 = document.createElement('td');
      td5.innerHTML = 'Mary';
      tr4.appendChild(td5);
      var td6 = document.createElement('td');
      td6.innerHTML = 27;
      tr4.appendChild(td6);
      table.appendChild(tr4);

      div.appendChild(table);
    </script>
  </body>
</html>

Name	Age
Tom	26
Harry	28
Mary	27