This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Simple DOM Exercises


SIMPLE DOM EXERCISE #1
Write a function called by clicking a button on a page to alert

  1. The number of links on the page
  2. The first and last of these links

( The answer is at http://jsbin.com/oweri3/edit )

 

SIMPLE DOM EXERCISE #2
//this function takes 3 arguments and
//must have an id already established
//on an element within your HTML

function insertion(el,id,text){
  var parent = document.getElementById(id);
  var newEl = document.createElement(el);
  var txt = document.createTextNode(text);
  var pasteEl = parent.appendChild(newEl);
  pasteEl.appendChild(txt);
};
 
//the call to the function
insertion('p', 'top', 'inserted child text node');
 
SIMPLE DOM EXERCISE #3
//this function takes 2 arguments and
//inserts your desired element within 
//the body along with the text
 
function mkelement(tag,text) {
  var el = document.createElement(tag);
  var container = document.getElementsByTagName('body')[0];
  var pasteEl = container.appendChild(el);
  if(pasteEl = true){
      //if all went aacording to plan do this
      var txt = document.createTextNode(text);
      el.appendChild(txt);
    }else{
           //otherwise something went wrong
           //alert('error');
           console.log('error');
         };//end if
};//end mkelement() function
 
mkelement('h1','Inserted H1 Text');
 
 
 
 
 
 
 
 

Task Discussion