How to add a new element after a list item?

[SM]

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addParagraph(0)">Item 1</li>
<li onclick="addParagraph(1)">Item 2</li>
<li onclick="addParagraph(2)">Item 3</li>
</ul>

When I click on a item, a paragraph is inserted after that item. That
part works fine. Check code below.
Im having a probem when i click on the same list item again. It keeps
adding the paragraph over and over again.
I don't know how to control it. I figure that i problably need some
sort of toggle function
Also, when i click on another list item, i want the previous list item
paragraph to go way! and the new one to appear

How can this be done with Javascript and DOM?

Need help.
Thanks
MArco

//function that adds a <pafter a list item
function addParagraph(index) {
var list = document.getElementById('list');

var div = document.createElement('div');
div.className = 'lyrics';

var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
p.appendChild(pTxt1);
div.appendChild(p);

list.insertBefore(div, list.getElementsByTagName("li")[index + 1]);
}
<style type="text/css">
.lyrics { width:300px; border:1px solid blue; }
</style>

[Randy Webb]

SM said the following on 5/20/2007 2:16 PM:

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addParagraph(0)">Item 1</li>
<li onclick="addParagraph(1)">Item 2</li>
<li onclick="addParagraph(2)">Item 3</li>
</ul>

When I click on a item, a paragraph is inserted after that item. That
part works fine. Check code below.
Im having a probem when i click on the same list item again. It keeps
adding the paragraph over and over again.
I don't know how to control it. I figure that i problably need some
sort of toggle function
Also, when i click on another list item, i want the previous list item
paragraph to go way! and the new one to appear

How can this be done with Javascript and DOM?

Place all the paragraphs in the page. Position them accordingly, then
toggle the .style.display property from block to none. Loop through the
paragraphs and toggle them. If it is block, set it to none and vice versa.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[scripts.contact]

On May 20, 12:16 pm, SM <[e-mail]:

Hello,

I have an unordered list
When I click on a item, a paragraph is inserted after that item. That
part works fine. Check code below.
Im having a probem when i click on the same list item again. It keeps
adding the paragraph over and over again.
I don't know how to control it. I figure that i problably need some
sort of toggle function

try this:
<ul id=list>
<li onclick="addParagraph(this)">Item 1</li>
<li onclick="addParagraph(this)">Item 2</li>
<li onclick="addParagraph(this)">Item 3</li>
</ul>

function addParagraph(ele) {
if(ele.para){
var parS=ele.para.style;
parS.display=(parS.display=="none")?'':'none';
return
}
var div = document.createElement('div');
div.className = 'lyrics';
var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
p.appendChild(pTxt1);
div.appendChild(p);

ele.para=div;
ele.parentElement.insertBefore(div,ele);
}

[RobG]

On May 21, 4:16 am, SM <[e-mail]:

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addParagraph(0)">Item 1</li>
<li onclick="addParagraph(1)">Item 2</li>
<li onclick="addParagraph(2)">Item 3</li>
</ul>

When I click on a item, a paragraph is inserted after that item. That
part works fine. Check code below.
Im having a probem when i click on the same list item again. It keeps
adding the paragraph over and over again.
I don't know how to control it. I figure that i problably need some
sort of toggle function
Also, when i click on another list item, i want the previous list item
paragraph to go way! and the new one to appear

How can this be done with Javascript and DOM?

Need help.
Thanks
MArco

//function that adds a <pafter a list item
function addParagraph(index) {
var list = document.getElementById('list');

var div = document.createElement('div');
div.className = 'lyrics';

var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
p.appendChild(pTxt1);
div.appendChild(p);

list.insertBefore(div, list.getElementsByTagName("li")[index + 1]);

Inserting a div into a ul element creates invalid HTML. No doubt
browsers are using error correction to do something with it, but to
get consistent results you must enter the div as a child of the li
element, not the ul.

In any case, the div doesn't seem to do anything other than wrap the p
element, so why not just insert that?

I also would not expect list.getElementsByTagName("li")[index + 1] to
work always as it create a reference to a non-existent element. If
that was required (say you are inserting an li after another one) you
should use nextSibling:

var newLi = document.createElement('li');
var li = list.getElementsByTagName("li")[index];
ul.insertBefore(newLi, li.nextSibling);
But that isn't needed in this case since you aren't inserting into the
UL, you should be inserting into the LI, so try something like:

var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li')[index];
var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
li.appendChild.(p);

--
Rob

[SM]

On May 21, 2:28 am, RobG <[e-mail]:

On May 21, 4:16 am, SM <[e-mail]:

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addParagraph(0)">Item 1</li>
<li onclick="addParagraph(1)">Item 2</li>
<li onclick="addParagraph(2)">Item 3</li>
</ul>

When I click on a item, a paragraph is inserted after that item. That
part works fine. Check code below.
Im having a probem when i click on the same list item again. It keeps
adding the paragraph over and over again.
I don't know how to control it. I figure that i problably need some
sort of toggle function
Also, when i click on another list item, i want the previous list item
paragraph to go way! and the new one to appear

How can this be done with Javascript and DOM?

Need help.
Thanks
MArco

//function that adds a <pafter a list item
function addParagraph(index) {
var list = document.getElementById('list');

var div = document.createElement('div');
div.className = 'lyrics';

var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
p.appendChild(pTxt1);
div.appendChild(p);

list.insertBefore(div, list.getElementsByTagName("li")[index + 1]);

Inserting a div into a ul element creates invalid HTML. No doubt
browsers are using error correction to do something with it, but to
get consistent results you must enter the div as a child of the li
element, not the ul.

In any case, the div doesn't seem to do anything other than wrap the p
element, so why not just insert that?

I also would not expect list.getElementsByTagName("li")[index + 1] to
work always as it create a reference to a non-existent element. If
that was required (say you are inserting an li after another one) you
should use nextSibling:

var newLi = document.createElement('li');
var li = list.getElementsByTagName("li")[index];
ul.insertBefore(newLi, li.nextSibling);

But that isn't needed in this case since you aren't inserting into the
UL, you should be inserting into the LI, so try something like:

var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li')[index];
var p = document.createElement('p');
var pTxt1 = document.createTextNode('Hello');
li.appendChild.(p);

--
Rob

Thanks guys,

Marco