Home/ Questions/Q 7619291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:39:01+00:00

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>

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0