<div id="div1">
I want a new div with some contents to appear below
</div>
<p>
<div id="div2">
<a href="javascript:addNode()">Click to insert the node</a>
<a href="javascript:delNode()">Click to delete the node</a>
</div>
And basically the two links insert some content (another div which can have contents added dynamically like a normal div), and remove it.
Lets say for argument's sake I want this to happen
Code:
<div id="div1">
I want a new div with some contents to appear below
<div id="newDiv">Hello World!</div>
</div>
<p>
<div id="div2">
<a href="javascript:addNode()">Click to insert the node</a>
<a href="javascript:delNode()">Click to delete the node</a>
</div>
I don't even know where to start with creating the node and adding content to it. I'm not even sure if it is adding removing nodes that performs this task.
I'm reasonably copmpetent with javascript but have never worked with nodes and can't grasp the concept so if anybody could make it as simple as possible that's be good and I'll delve deeper from there.
function addNode() {
var div = document.createElement("div"); // create a div element
div.id = "newDiv"; // give it an id
div.appendChild(document.createTextNode("Hello World!")); // create a text node with "Hello World!" and append it to the div
var div1 = document.getElementById("div1"); // get the div with the id "div1" and use it as starting point for adding nodes
div1.parentNode.appendChild(div); // we append to the parent element of "div1" the newly created node
}
function delNode() {
var div1 = document.getElementById("div1"); // get the div with the id "div1" and use it as starting point for deleting nodes
var remove_child = div1.parentNode.childNodes[div1.parentNode.childNodes.length - 1]; // we want the last child of the parent of "div1" to be removed
// we delete the child if it isn't the one with the id "div1"
if(typeof(remove_child.id) == "undefined" || remove_child.id != "div1") {
div1.parentNode.removeChild(remove_child); // we use the removeChild function of the parent element of "div1" to remove the child
}
}
innerHTML is to the DOM...
As processed meat is to steak...
If you are going to use innerHTML, you may as well use style.display and toggle block/none....
.....Willy
BTW: If you want to add a break to the textNode you will need to create another element ( br ) and append that to it...
What's the harm? I'm seriously asking, not challenging you. I mean, it is supported by most major browsers, and is so much simpler. I use it all the time for my apps, which are IE only, so I don't really care in that aspect. For my greater good though, why is it better to create and append in lieu of innerHTML?
Basscyst
__________________
Helping to build a bigger box. - Adam Matthews
What's the harm? I'm seriously asking, not challenging you. I mean, it is supported by most major browsers, and is so much simpler. I use it all the time for my apps, which are IE only, so I don't really care in that aspect. For my greater good though, why is it better to create and append in lieu of innerHTML?
Basscyst
It might be no harm wether:
1. You need a simple text to be inserted, or a very short HTML code line
2. The future browsers will keep the innerHTML method (which is not amongst the w3c recomandations)
When dealing with a little more intricate HTML codes (ie: tables) and you need to change the objects/attributes dinamically several times on the page (ie: sorting columns) you will discover DOM methods are by far much easier and much logical to use).
Before you post, read our: 
I mean, it is supported by most major browsers, and is so much simpler. I use it all the time for my apps, which are IE only, so I don't really care in that aspect. For my greater good though, why is it better to create and append in lieu of innerHTML?
