Welcome to WebmasterWorld Guest from 54.167.144.170

Forum Moderators: open

Dynamically add div

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

5+ Year Member



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 Jul 21, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



see below

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

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

WebmasterWorld Senior Member Top Contributors Of The Month



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 Jul 21, 2013 (gmt 0)

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



Without id's:

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

WebmasterWorld Senior Member Top Contributors Of The Month



$("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 Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

5+ Year Member



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 Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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 Jul 22, 2013 (gmt 0)

5+ Year Member



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 Jul 22, 2013 (gmt 0)

WebmasterWorld Senior Member Top Contributors Of The Month



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

5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month