Inserting a new <ul> in a selected <li>
Question
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...
5 answers
solution1
1 ACCPTED 2012-03-06 17:46:00
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/
solution2
0 2012-03-06 17:41:38
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>");
solution3
0 2012-03-06 17:45:16
$('<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.
solution4
0 2012-03-06 17:45:53
solution5
0 2012-03-06 17:47:03
This will work:
$('li').click(function() {
$(this).append('<ul><li>xxx</li></ul>');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.