CODEWITHSUNDEEP
javascriptjqueryinserthtml-lists
Vivek
Vivek

Reputation: 1461

Insert element into li with an id using jQuery

I have the following code

<ul id="box1">
  <li id="node3">Student C</li>
  <li id="node1">Student A</li>
  <li id="node2">Student B</li>
</ul>

I want to append into 'node1' some text field, how can I refer to it?

$("li[id^=node]:last").attr("id") - gives me the id of the object I added last, if I iterate through it, I get all the id's i need, but now I know the id and want to insert into it.

I have tried before() and after(), but its of no use, I need to insert the text file inside the <li> tag. So the final would be like:

<ul id="box1">
  <li id="node3">Student C</li>
  <li id="node1">Student A <input type="text" name="studAValue" style="margin-left:25px"/> </li>
  <li id="node2">Student B</li>
</ul>

Upvotes: 3

Views: 10067

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 12503

Try

$("li[id^='node']:last").append('<b>test</b>');

Working demo http://jsfiddle.net/uwXSR/

Upvotes: 11

Samich
Samich

Reputation: 30105

http://jsfiddle.net/VfZuk/4/

$('#node1').append($('<input type="text" name="studAValue" style="margin-left:25px"/>'));

Upvotes: 0

aroth
aroth

Reputation: 54806

Just refer to it by id:

$("#node1").append(
    '<input type="text" name="studAValue" style="margin-left:25px"/>');

Or in native JavaScript:

document.getElementById("node1").innerHTML += 
    '<input type="text" name="studAValue" style="margin-left:25px"/>';

Upvotes: 3

Related Questions