Create and remove elements

dmurray

10-12-2002, 10:11 PM

I am placing variable content, triggered by a rollover, into one of 3 <div> tags that have overlapping positions on the display. My first attempts appeared to work OK. I was simply using innerHTML = "" to clear the old <div> content. However, when a form with <input> elements was placed in one <div1>, the <div2> "under" the input tag would interfere (no cursor response) with form elements. This interference was at the left boundary of the interfering <div2>.

I then decided to create and then remove the <div> element as follows:

// Div one
function makeTopics() {
if(typeof(d_topic)!="undefined"){document.body.removeChild(d_topic)}
if(typeof(d_section)!="undefined"){document.body.removeChild(d_section)}
if(typeof(d_content)!="undefined"){document.body.removeChild(d_content)}
var d_topic = document.createElement("<div class='topic' id='d_topic' name='d_topic'>");
document.body.insertBefore(d_topic);
document.getElementById('d_topic').innerHTML=topic;
}

// Div two
function swapContent(n) {
if (typeof(d_content)!="undefined"){document.body.removeChild(d_content);}
var d_content = document.createElement("<div class='content' id='d_content' name='d_content'>");
document.insertBefore(d_content);
document.getElementById('d_content').innerHTML=content[n];
}

// Div three
function swapSection(section) {
if(typeof(d_section)!="undefined"){document.body.removeChild(d_section)}
if(typeof(d_content)!="undefined"){document.body.removeChild(d_content)}
if(typeof(d_topic)!="undefined"){document.body.removeChild(d_topic)}
var d_section = document.createElement("<div class='section' id='d_section' name='d_section'>");
document.body.insertBefore(d_section);
document.getElementById('d_section').innerHTML=section;

What happens is:

makeTopic() <-> makeTopic() :1 or more rollover OK
swapSection() <-> swapSection :1 or more rollover OK
makeTopic() <-> swapSection() : Alternating rollover OK
swapSection <-> makeTopic() : Alternating rollover OK
makeTopic()<->makeTopic()->swapSection() : Fails
swapSection<->swapSection()->makeTopic() : Fails

The error message I get is "Object doesn't support this property or method".

If I remove the removeChild code from the script, I don't get the error but the old contents isn't removed either.

Any Thoughts

Thanks

beetle

10-14-2002, 07:44 PM

2 questions...

1) What are you storing in d_topic, d_section, and d_content? Because if they aren't pointers to the objects that need to be removed, you need to make it that way.

2) Are the above objects actually children of the body?

dmurray

10-15-2002, 02:53 AM

beetle

Thank you for your reply. As is obvious, I'm new to most of this but I'll do my best to answer the questions.

Question 1. I am placing JavaScript variables into d_topic, etc. These variables contain text, forms, tables, etc. For example,

x = "Some Text";
or
x = "<form>
<input type='text' />
</form>";

Question 2. I am a bit embarrassed to say that I'm not really sure d_topic, etc., are children of the <body>. I thought that the "document.body.insertBefore(d_topic);" statement placed the newly created <div> into the <body>. From your question, this must not be the case. Maybe a clue? When I included a border for the <div> tags, it appeared that empty <div>'s were being created "beneath" the <div> containing the variable content.

However, I did finally get things to work (I think) in IE and Mozilla with this code :

function makeTopics() {
var testNode=document.getElementById('d_content')
if(testNode!=null){document.body.removeChild(testNode)}
var testNode=document.getElementById('d_section')
if(testNode!=null){document.body.removeChild(testNode)}
var newDiv = document.createElement("div");
attrib = (navigator.appName=='Netscape') ? 'class' : 'className';
newDiv.setAttribute("id",'d_topic');
newDiv.setAttribute(attrib,'topic');
document.body.appendChild(newDiv);
document.getElementById('d_topic').innerHTML=topic;
}

I honestly don't know why it decided to work or why the former code didn't. I changed the test for the the <div> and added code to create the id and class atttributes (which seemed to be required for Mozilla to work), but I don't see why that should have fixed anything.

I'd appreciate your insight.

If I may ask two additional questions. I seemed to have read in this forum that using

document.getElementById('d_topic').innerHTML=topic;

to place content into an element is not recommended. Is this the case?

Second. Could you recommend a book that would cover DHTML, including cross-browser issues? I do go to MSDN and the Gecko DOM reference but I'm still a bit old fashioned and need the printed page.

Again, many thanks

Denny

RadarBob

10-16-2002, 12:05 AM

cond. Could you recommend a book that would cover DHTML, including cross-browser issues?

For tutorials, I've found JavaScript Unleashed to be pleasant. I'd start here. Once you get the hang of the core JavaScript, event handling and what kind of properties are supported, (and objects are way cool too!) etc. you'll begin to see how to apply it to your specific needs. Once you can walk the walk, so to speak, then the next recommendation will be *extremely* helpful.

As a reference i highly recommend Pure Javascript. This book is over 1,400 printed pages, and the entire book, along with the additional 800 pages are on the accompaning CD. The point is that this reference is complete. period. And... it specifies what version of what browser and what version of Javascript impliments each thing.

There is a good intro tutorial on the DOM at http://www.webreference.com/js/ It's written as a series of magazine column like lessons. Look for "The DOM, Part xxxx"

good luck!:thumbsup:

dmurray

10-16-2002, 01:58 AM

RadarBob

Thanks a bunch.

Denny