I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQuery. However, the manipulation does not seem to work as expected. Although I have successfully used similar jQuery code on another page hosted on the same server, it appears to be ineffective in this scenario. Is there a limitation with jQuery when it comes to manipulating data that is dynamically created server-side with ASP.NET?
<script langauge="C#" runat="server">
string output;
protected void Page_Load(object sender, EventArgs e) {
getDirectoryTree(Request.QueryString["path"]);
itemWrapper.InnerHtml = output;
}
private void getDirectoryTree(string dirPath) {
try {
System.IO.DirectoryInfo rootDirectory = new System.IO.DirectoryInfo(dirPath);
foreach (System.IO.DirectoryInfo subDirectory in rootDirectory.GetDirectories()) {
output = output + "<ul><li>" + subDirectory.Name + "</li>";
getDirectoryTree(subDirectory.FullName);
if (subDirectory.GetFiles().Length != 0) {
output = output + "<ul>";
foreach (System.IO.FileInfo file in subDirectory.GetFiles()) {
output = output + "<li><a href='" + file.FullName + "'>" + file.Name + "</a></li>";
}
}
output = output + "</ul>";
}
} catch (System.UnauthroizedAccessException) {
//This throws when we don't have access, do nothing and move one.
}
}
</script>
After generating the directory tree, I attempt to manipulate the output using the following JavaScript:
<script langauge="javascript">
$('li > ul').not('li > ul > li > ul').prev().append('+');
</script>
For reference, here is the code for the containing div element:
<div id="itemWrapper" runat="server">
</div>