What makes adding and replacing objects on your web page more difficult than removing objects that are already in the page is that you must first create the new object to be added to the page brfore you can add it.
There are a number of different methods that the Javascript standard DOM provides for creating objects that can then be added to your web page.
- createAttribute
- createCDATASection
- createComment
- createDocumentFragment
- createElement
- createEntityReference
- createProcessingInstruction
- createTextNode
The two of these that you will use the most often are createElement and createTextNode because they are the two that define a container that you want to add to the web page and the content to put in that container respectively.
Let's say that we want to add a new paragraph into our web page that reads "Kilroy was here.". To be able to add this paragraph into our web page we must first define a paragraph container and the text that we want it to contain. Here's the code to create our paragraph.
var txt = 'Kilroy was here.';
var newT = document.createTextNode(txt);
Having created our container and text we next need to add the text to the container and the container to the page. We'll look at how to do that in the next tutorial.