homepage Welcome to WebmasterWorld Guest from 23.20.63.27
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dynamically add div
greencode




msg:4595046
 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




msg:4595083
 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




msg:4595087
 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




msg:4595092
 7:47 pm on Jul 21, 2013 (gmt 0)

Without id's:

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

JD_Toims




msg:4595098
 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




msg:4595196
 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




msg:4595246
 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




msg:4595249
 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




msg:4595285
 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




msg:4595288
 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




msg:4595290
 10:33 am on Jul 22, 2013 (gmt 0)

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

greencode




msg:4595291
 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