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="addPar agraph(0)">Item 1</li>
<li onclick="addPar agraph(1)">Item 2</li>
<li onclick="addPar agraph(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(in dex) {
var list = document.getEle mentById('list' );

var div = document.create Element('div');
div.className = 'lyrics';

var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
p.appendChild(p Txt1);
div.appendChild (p);

list.insertBefo re(div, list.getElement sByTagName("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="addPar agraph(0)">Item 1</li>
<li onclick="addPar agraph(1)">Item 2</li>
<li onclick="addPar agraph(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.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[scripts.contact]

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

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="addPar agraph(this)">I tem 1</li>
<li onclick="addPar agraph(this)">I tem 2</li>
<li onclick="addPar agraph(this)">I tem 3</li>
</ul>

function addParagraph(el e) {
if(ele.para){
var parS=ele.para.s tyle;
parS.display=(p arS.display=="n one")?'':'none' ;
return
}
var div = document.create Element('div');
div.className = 'lyrics';
var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
p.appendChild(p Txt1);
div.appendChild (p);

ele.para=div;
ele.parentEleme nt.insertBefore (div,ele);
}

[RobG]

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

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addPar agraph(0)">Item 1</li>
<li onclick="addPar agraph(1)">Item 2</li>
<li onclick="addPar agraph(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(in dex) {
var list = document.getEle mentById('list' );

var div = document.create Element('div');
div.className = 'lyrics';

var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
p.appendChild(p Txt1);
div.appendChild (p);

list.insertBefo re(div, list.getElement sByTagName("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.getElement sByTagName("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.create Element('li');
var li = list.getElement sByTagName("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.getEle mentById('list' );
var li = ul.getElementsB yTagName('li')[index];
var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
li.appendChild. (p);

--
Rob

[SM]

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

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

Hello,

I have an unordered list similar to this one:

<ul id=list>
<li onclick="addPar agraph(0)">Item 1</li>
<li onclick="addPar agraph(1)">Item 2</li>
<li onclick="addPar agraph(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(in dex) {
var list = document.getEle mentById('list' );

var div = document.create Element('div');
div.className = 'lyrics';

var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
p.appendChild(p Txt1);
div.appendChild (p);

list.insertBefo re(div, list.getElement sByTagName("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.getElement sByTagName("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.create Element('li');
var li = list.getElement sByTagName("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.getEle mentById('list' );
var li = ul.getElementsB yTagName('li')[index];
var p = document.create Element('p');
var pTxt1 = document.create TextNode('Hello ');
li.appendChild. (p);

--
Rob

Thanks guys,

Marco