jQuery append() under an element ID?

Question

I am building a navigation bar that is driven based off of values retrieved from a SharePoint List. Right now, I am using an <ul> for my column headers and <li> for my contents. I can get the headers to display correctly and can also get the contents of that column to display correctly. What I'm having troubles with is that the <li> seems be appended to the <ul> which is great, but it's also putting it inside of it. My <ul> has a border around it and I want the content to be appended directly under that border but instead, it's putting everything inside of it.

Here is the specific block of code I believe is wrong:

$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});

Here is all of my code:

    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////EVERYTHING BELOW THIS LINE IS GOOD TO    GO/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
//Print Headers to Screen. This will drive the core functionalty of the navpart
var siteUrl = '/sites/dev';
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
theCounter = 0;
var Headers = new Array();
var getCurrentElementId = null;
function retrieveListItems() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),  Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    theCounter += 1;
    Headers[theCounter - 1] = oListItem.get_item('Title');
}
var HeaderDisplay = _.uniq(Headers);
for (var i = 0; i <= HeaderDisplay.length - 1; i++) {
    $('#TableElement').append("<th id=Header" + i + ">" + HeaderDisplay[i] + "::::::" +   "</th>");
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////EVERYTHING ABOVE THIS LINE IS GOOD TO    GO/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////


// You got the headers to print as expected. Right now you need to figure out how to get the current ID
// that the mouse is over. Try looking at another project you did where the mouse goes into the table header
// and the outline expands.


$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {
  // Come back to this:::::::  var content = $(this).html();


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});


//This should be the universal onmouseover event that will expose only links
//and values relavent to the selected header.

//$(document).ready(function onPageLoad() {
//    $().SPServices({
//        operation: "GetListItems",
//        async: false,
//        listName: "myList",
//        CAMLQuery: "<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where></Query>",
//        completefunc: function completeFunction(xData, Status) {
//            $(xData.responseXML).SPFilterNode("z:row").each(function () {
//                var Headers = "<th>" + $(this).attr("ows_Title") + "</th>";
//                $("#TableElement").append(Headers);
//            });
//        }
//    });
//});

HTML Code:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs" Inherits="AnotherMarcPart.VisualWebPart1.VisualWebPart1UserControl" %>
<!DOCTYPE Html />
<html>
<head>
    <link rel="Stylesheet" type="text/css"  href="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Stylesheet1.css" />
    <title></title>
</head>
<body>
<ul id="TableElement"></ul>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio  2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jquery.SPServices-2013.01.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Underscore.js 1.5.2.js">    </script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\JScript1.js"></script>

</body>
</html>

Answer 1

<li> tags must go inside a <ul> . If you want your content after the <ul> , then don't put it in an <li> (perhaps put it in a <div> instead) and use jQuery's .after() or .insertAfter() to put it after the <ul> .

Also, this code is likely wrong:

$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {


    $("#" + this.id).append("<li>" + this.id + "</li>");
});
});

You don't want two .hover() handlers inside of one another. You will be installing the second .hover() over and over every time you hover over the first one. That will give you lots of duplicate event handlers and the function inside will get executed multiple times.

If .insertAfter() isn't exactly what you want, then show us your HTML and show us exactly where you want the new content inserted. You said you wanted it after the <ul> tag's border so that's what .insertAfter() will do.

---

Based on how you've edited your question, you would append to that other UL like this:

$("#TableElement").append("<li>" + this.id + "</li>");

That will make the <li> be the last <li> inside of the TableElement <ul> which will be inside it's border. There is no way to put an <li> inside a <ul> and have the <li> be outside the border around the <ul> . To do that, you would have to create a container object AFTER the <ul> and put the content into that container instead.