CODEWITHSUNDEEP
javascriptjqueryhtml-lists
Geoff
Geoff

Reputation: 69

Inserting a new <ul> in a selected <li>

I have this as a test harness:

<html>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("li").click(function () {
            var id = $(this).attr("nodeid");
            var path = window.location + "/SelectNode/" + id;

            $.getJSON(path, function (data, status) {
                alert(id + " : " + data);
                //$("#" + id).text("<ul><li>" + data + "</li></ul>");
            });

        });

    });


</script>
<title>JS Test</title>
<head>
    JS Test</head>
<body>
    <div">
        <ul>
            <li nodeid="1">item 1</li>
            <li nodeid="2">item 2</li>
            <li nodeid="3">item 3</li>
        </ul>
    </div>
</body>
</html>

I want to be able to add a new child list to the 'clicked' li. For the life of me I can't figure out the syntax of injecting html after the specific li item clicked. The intention is to add an entire

<ul>
<li>injected item</li>
</ul>

after the the selected li. The commented out bit is my feeble attempt at it. It goes without saying that I am a jQuery beginner. I am throughly confused after reading the docs so need some people interaction to straigten me out here...

Upvotes: 0

Views: 534

Answers (5)

Alex
Alex

Reputation: 6406

First, is the nodeid attribute valid HTML? I don't think so. Use data-nodeid, this would be valid HTML5. (Why don't you use a normal id? You are mixing nodeid and id. Anyway, it's possible with nodeid. read on.)

If you want to add HTML code you can't use .text(). There are many ways to add HTML code, this is an example with .append: http://jsfiddle.net/Vxaeb/1/

$("li").click(function() {
    $(this).append('<ul><li>injected item</li></ul>');
});

(Just an example)

You get the data-nodeid with var id = $(this).attr("data-nodeid");. Access the element with $('li[data-nodeid="'+id+'"]').

HTML:

<div>
    <ul>
        <li data-nodeid="1">item 1</li>
        <li data-nodeid="2">item 2</li>
        <li data-nodeid="3">item 3</li>
    </ul>
</div>

Full JS:

$("li").click(function() {
    var id = $(this).attr("data-nodeid");
    var path = window.location + "/SelectNode/" + id;

    $.getJSON(path, function (data, status) {
        alert(id + " : " + data);
        $('li[data-nodeid="'+id+'"]').append('<ul><li>'+data+'</li></ul>');
    });
});

Here a jsFiddle with your code AND nodeid (as you mentioned you needed that) AND valid HTML5: http://jsfiddle.net/Vxaeb/3/

Upvotes: 1

NakedBrunch
NakedBrunch

Reputation: 49423

This will work:

$('li').click(function() {
    $(this).append('<ul><li>xxx</li></ul>');        
});

Click here for a working fiddle

Upvotes: 0

hohner
hohner

Reputation: 11588

If you want to insert data after your selected li element, use jQuery's after function:

$('.selected').after('<p>Test</p>');

If you want to insert data inside your selected li element, use jQuery's html function.

$('.selected').html('<p>Test</p>');

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114447

$('<li>item 4</li>').insertAfter('#ABC') would work, if you had a LI with an ID of "ABC". If you use regular IDs in your HTML this will work fine.

Upvotes: 0

Marius Ilie
Marius Ilie

Reputation: 3323

first of all, you have no element with that id on the page. second of all, you are trying to add html to the LI element, not plain text so you should use .html()

$("li[nodeid=" + id + "]").html("<ul><li>" + data + "</li></ul>");

Upvotes: 0

Related Questions