Adding text to a page after loading

Writing with JavaScript 3

This page was written many years ago. What I tried to do in these pages is now easy using W3C DOM. See this page. This page is of historical interest only!

Whilst it is possible to do many things with document.write, it is better to use a different approach when writing to a page after it has loaded. You might also find the page, Modifying Existing Text, of interest. This page mainly uses:

Press the button below and note what happens.




I get some more text and colour in the page. If you don't like it, then remove it - the button is below (it is enabled only when there is something to delete. So if you haven't clicked the "Add code to this page" button, then it will not be enabled.)


  The above demonstrates adding code to a page after it has been loaded.

In order to know where to write our new code, we first set up a paragraph in the body with an ID we can use to identify it:

<p id="myLine">

As we can place the above code anywhere in the body, we can write anywhere in the body, even after the page has loaded.

In the head of the document we have the following code for two functions, one, makeTable() creates the table in the page, and the other, deleteTable(), removes the table. The first function below makes the table:

 

 

function makeTable() {

var myparagraph=document.getElementById("myLine");

//first we get the element that already exists in the body

//to define where we are going to add the table

//we use createElement to make the things we want

mytable = document.createElement("TABLE");

//we create a table. Now we go down through the

//DOM, creating the bits we want

mytablebody = document.createElement("TBODY");

//make table body

for(j=0;j<3;j++) {

theRow=document.createElement("TR");

//make rows

for(i=0;i<2;i++) {

theCell=document.createElement("TD");

//make cells

theText=document.createTextNode("cell is row "+j+", column "+i);

//make text for the cells.

 

//now we have done making the bits we want

//and put them together, starting with the "lowest" elements

//and working our way up

//we use appendChild for this:

theCell.appendChild(theText);

//add the text to the cells

theRow.appendChild(theCell);

//add cells to the rows

}//end of for cells

mytablebody.appendChild(theRow);

//add rows to tablebody

}//end of for rows

mytable.appendChild(mytablebody);

//so, nearly done, we append the tablebody to the table

myparagraph.appendChild(mytable);

//and finally add the table where we want it in

//in the document. In our case after the paragraph

 

//we can do some things with our new table

//here we use setAttribute, and style

mytable.setAttribute("bgColor","red");

mytable.style.color="green";

mytable.setAttribute("border","10px");

mytable.style.fontWeight="bold";

//while the above are cosmetic,

//the next items is very important because

//we give the new table an ID

mytable.setAttribute("id","tableID");

 

//here we enable the DELETE button, because

//there is something to delete.

var mybutton=document.getElementById("deleteButton");

mybutton.disabled=false;

}

In order to  remove the paragraph, once we have added it, we use the next function, deleteTable().

function deleteTable() {

myPara=document.getElementById("myLine");

//as before we find our place in the document

myTable=document.getElementById("tableID");

//we find the table we have created by using the

//ID we have given it

myPara.removeChild(myTable);

//having got a handle on the table and the paragraph

//we use removeChild to destroy the table.

 

//lastly we disable the DELETE button, so it won't do

//any mischief when there is nothing to delete

var mybutton=document.getElementById("deleteButton");

mybutton.disabled=true;

}//end of deleteTable()

The two functions are called by the buttons, as appropriate. The button to delete the table would cause an error if we were to press it before creating the table or after deleting it. So this button is enabled only when there is a table to delete. We use the property, disabled, to set this button. 

Next writing to the page after first load, using a text area. Ken Ward's HTML Guide...

 


[If you need to learn more about HTML visit the HTML Tutorial]

To ask questions, make comments, etc,
use the mailing list

I am always pleased to hear from you.
To ask questions, make comments, etc,
use the mailing list : Click here to join 1stJavaScript