By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,248 Members | 1,961 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,248 IT Pros & Developers. It's quick & easy.

How to add a new element after a list item?

P: n/a
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>

May 20 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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/
May 20 '07 #2

P: n/a
On May 20, 12:16 pm, SM <servandomont...@gmail.comwrote:
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);
}

May 21 '07 #3

P: n/a
On May 21, 4:16 am, SM <servandomont...@gmail.comwrote:
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

May 21 '07 #4

P: n/a
SM
On May 21, 2:28 am, RobG <r...@iinet.net.auwrote:
On May 21, 4:16 am, SM <servandomont...@gmail.comwrote:
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

May 21 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.