Dynamically add div

Forum Moderators: open

Message Too Old, No Replies

Dynamically add div

greencode

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

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

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

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

Without id's:


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

JD_Toims

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

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

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

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

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

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

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

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

greencode

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