homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dynamically add div
greencode

5+ Year Member



 
Msg#: 4595044 posted 2:32 pm on Jul 21, 2013 (gmt 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.

 

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4595044 posted 6:49 pm on Jul 21, 2013 (gmt 0)

see below

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

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4595044 posted 6:50 pm on Jul 21, 2013 (gmt 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>

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4595044 posted 7:47 pm on Jul 21, 2013 (gmt 0)

Without id's:

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

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4595044 posted 9:06 pm on Jul 21, 2013 (gmt 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>

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4595044 posted 4:09 am on Jul 22, 2013 (gmt 0)

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>

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4595044 posted 7:57 am on Jul 22, 2013 (gmt 0)

An alternative maybe, have Block 2a there all the time and toggle when it is displayed ?

greencode

5+ Year Member



 
Msg#: 4595044 posted 8:27 am on Jul 22, 2013 (gmt 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.

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4595044 posted 10:21 am on Jul 22, 2013 (gmt 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.

greencode

5+ Year Member



 
Msg#: 4595044 posted 10:28 am on Jul 22, 2013 (gmt 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.

JD_Toims

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4595044 posted 10:33 am on Jul 22, 2013 (gmt 0)

Sounds like a good plan/implementation, and glad I could help a bit!

greencode

5+ Year Member



 
Msg#: 4595044 posted 10:35 am on Jul 22, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved