This is the final installment of my four-part tutorial on manipulating the DOM with javascript. So far, we have explored the createElement, appendChild, insertBefore, replaceChild and removeChild functions. In this final post, we will explore the createTextNode function, and will then put it all together into a real world example.
createTextNode
One thing we’ve not explored yet is how to add text inside of an element. Obviously, there is no HTML tag for plain text, so we can’t use the createElement function to do so. Instead, we have to use the createTextNode function. Let’s say that we want to add some text to our div and insert it after all of our images. The code we would use to do so would look something like:
mydiv.appendChild(document.createTextNode("This is some text that I'm adding to my div"));
We would now have the text “This is some text that I’m adding to my div” at the end of the div, following all of our images. Our outline would now look like:
- mydiv
- img1
- img2
- textnode (“This is some text that I’m adding to my div”)
insertAfter
I am going to take a slight detour to explore a function that does not really exist within the DOM. That function is the insertAfter function. As I said, there is no insertAfter function, so you need to do a little bit of a workaround in order to successfully insert an element after another element. Basically, in order to do that, you need to use the insertBefore function to insert your new element before the next element in the DOM.
For the purposes of an example, let’s say that we want to insert a new div after the div we’ve referenced as “mydiv”. To do so, we would use code similar to the following:
var newel = document.createElement("div");
newel.id = "newel";
newel.appendChild(document.createTextNode("This is a new div. It will be inserted after 'mydiv'"));
mydiv.parentNode.insertBefore(newel,mydiv.nextSibling);
The code above will create a new div with the id of “newel”, add some text inside of it and insert it directly after our old div.
Real-world Example
We will now build a real-world example to show you how you might be able to use these functions. In the following example, we will use the insertBefore, appendChild, createElement and createTextNode functions to manipulate the DOM.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript DOM Examples</title>
<script type="text/javascript" language="javascript">
var t=4;
function replacebull(what) {
var oldel = document.getElementById('bullet'+what);
var newel = document.createElement("input");
newel.type = "text";
newel.id = "input"+what;
newel.value = oldel.innerHTML;
newel.onblur = function() { restorebull(what) };
oldel.replaceChild(newel,oldel.firstChild);
newel.parentNode.onclick = null;
}
function restorebull(what) {
var oldel = document.getElementById('input'+what);
var newel = document.createTextNode(document.getElementById('input'+what).value);
oldel.parentNode.replaceChild(newel,oldel);
newel.parentNode.onclick = function() { replacebull(what) };
}
function addbull() {
var what = t;
var par = document.getElementById('infolist');
var newin = document.createElement('input');
newin.id = 'input'+what;
newin.value = 'Insert some text here';
newin.onblur = function() { restorebull(what) };
var newbull = document.createElement('li');
newbull.id = 'bullet'+what;
newbull.appendChild(newin);
par.insertBefore(newbull,document.getElementById('bulletnew'));
t++;
}
</script>
</head>
<body>
<div id="div1">
Please click on one of the bullets below to edit the information.
<ul id="infolist">
<li id="bullet1" onclick="replacebull(1)">This is bullet one</li>
<li id="bullet2" onclick="replacebull(2)">This is bullet two</li>
<li id="bullet3" onclick="replacebull(3)">This is bullet three</li>
<li id="bulletnew" onclick="addbull()">Click here to insert a new bullet</li>
</ul>
</div>
</body>
</html>
The example above starts with a simple unordered list that contains four list items. Then, if you click on any of the top three, the text inside the li will be replaced with a text input. You can change the text any way you want to. When you jump back out of the text input, it will be converted back into a regular textnode. If you click on the last bullet item, it will insert a new text input, so that you can add additional bullet items to the list. That new bullet item will behave the same way as the items above.
You could easily manipulate the script above to allow you to remove bullets from the list, too, if you wanted to. In addition, I’m sure you can imagine how useful something like this would be when used as part of an AJAX application. You could allow users to generate their own content for their pages, and then use an AJAX function to save that new content into a database.
I hope this series of tutorials has been helpful, and that you will find new and innovative ways to utilize these functions in your own pages.
2 Responses
Superb !!! for a amateur like me… this was one of the best and coolest thing i have ever done :)… keep up the good work man… excellent !!
Great tutorials for getting to grips with the DOM!!
Could you please explain the following results I have got using Firebug
1.When I double-click on Bullets 1,2 or 3, the text immediately disappears from the List line?
2.When I double-click on “Insert new bullet”, no onclick details appear on the List line,
although I can double-click on the added bullet line and it works fine?
Regards
Alan