Welcome to WebmasterWorld Guest from 50.19.0.90

Forum Moderators: open

Message Too Old, No Replies

Dynamically add div

     
2:32 pm on Jul 21, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


I have the following code which gives me 4 blocks on the page. I need to insert another list item after the first 2 blocks. Is this possible?

<ul>
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
</ul>

So I would then like it to appear as:

<ul>
<li>Block 1</li>
<li>Block 2</li>
<li>This block gets inserted dynamically</li>
<li>Block 3</li>
<li>Block 4</li>
</ul>

Thanks in advance for any help.
6:49 pm on July 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


see below

[edited by: JD_Toims at 6:50 pm (utc) on Jul 21, 2013]

6:50 pm on July 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


I misread the question the first time... Oops! lol

I think the easiest way I can think of is to give the <li>s ids and use jQuery .before();


<ul>
<li id="li_1">Block 1</li>
<li id="li_2">Block 2</li>
<li id="li_3">Block 3</li>
<li id="li_4">Block 4</li>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#li_3').before('<li>This block gets inserted dynamically</li>');
});
</script>
7:47 pm on July 21, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


Without id's:

$("li:nth-child(3)").before("<li>foo </li>");
9:06 pm on July 21, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


$("li:nth-child(3)").before("<li>foo </li>");

Definitely, but a "footnote" for anyone using it is: make sure you don't "pull a me" and add another list forgetting you're inserting based on child element count. (Been there, done that. Learned quickly classes and ids are my friends for these type of things, especially if they're in an external .js file rather than coded on-page ;)

<ul>
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
</ul>
<ul>
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('li:nth-child(3)').before('<li>This block gets inserted dynamically</li>');
});
</script>
4:09 am on July 22, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


In case you'd rather not have to load the jQuery library just to get a simple function, you could try something like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="charset" value="utf-8">
<title>Insert Element with JavaScript</title>
<script>

function doInsertLI(insertPosition, insertValue) {
// At some point, you need to find a method of locating the
// <UL> element. I used the enclosing <DIV> with a known 'id' attribute.
// Usually, I'd just attach an 'id' directly on the <UL> element.
var boxEl = document.getElementById('myBox');
var ulEl = boxEl.getElementsByTagName('UL')[0];
var newLI = document.createElement('LI');
var newLIText = document.createTextNode(insertValue);
newLI.appendChild(newLIText);
ulEl.insertBefore(newLI, ulEl.childNodes[insertPosition+1]);
} // end doInsertLI

</script>
</head>
<body>
<h1 style="text-align:center;">Inserting An Element With JavaScript</h1>
<div id="myBox">
<ul>
<li>Block 1</li>
<li>Block 2</li>
<li>Block 3</li>
<li>Block 4</li>
</ul>
<br>
<p><a href="javascript:doInsertLI(3, 'This block gets inserted dynamically');">Insert &lt;LI&gt;</a></p>
</div>
<br>
</body>
</html>
7:57 am on July 22, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


An alternative maybe, have Block 2a there all the time and toggle when it is displayed ?
8:27 am on July 22, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


Thanks for everyone's help with this. I went with Fotiman's suggestion of

$("li:nth-child(3)").before("<li>foo </li>");

Which appears to work well.
10:21 am on July 22, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


Which appears to work well.

It does and will, as long as you don't add another list to the page or move the code to an external .js file which can effect any page and will effect every list on any page site-wide.
10:28 am on July 22, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


Thanks JD_Toims. What I've done is actually give my ul an id as well as give the li's classes so that it's only referencing that section of the site.
10:33 am on July 22, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


Sounds like a good plan/implementation, and glad I could help a bit!
10:35 am on July 22, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0


Indeed, thanks for everyone's help. I do love this site and all the incredibly helpful members
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members