Javascript 元素ID下的jQuery append（）？

我正在构建一个导航栏，该导航栏基于从SharePoint列表检索的值驱动。现在，我使用

作为我的列标题，使用

作为我的内容。我可以正确显示标题，也可以正确显示该列的内容。我遇到的问题是，

似乎被附加到了

中，这很好，但它也把它放在了里面。我的

周围有一个边框，我希望内容直接附加在该边框下，但它将所有内容都放在边框内

以下是我认为错误的特定代码块：

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


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

$（'#TableElement'）。悬停（函数（）{
$（'[id^=Header]'）。悬停（函数（）{
$（“#”+this.id）.append（“
”+this.id+”
”）；
});
});

以下是我的全部代码：

    ///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
////////////////////////////////////////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);
//            });
//        }
//    });
//});

//////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////这条线以下的一切都很好/////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////    //////////////////////////////////////////
//将标题打印到屏幕。这将推动导航部件的核心功能
var siteUrl='/sites/dev'；
ExecuteOrderLayUntilScriptLoaded（retrieveListItems，“sp.js”）；
计数器=0；
var Headers=新数组（）；
var getCurrentElementId=null；
函数retrieveListItems（）{
var clientContext=new SP.clientContext（siteUrl）；
var oList=clientContext.get_web（）.get_list（）.getByTitle（'myList'）；
var camlQuery=new SP.camlQuery（）；
camlQuery.set_viewXml（“”）；
this.collListItem=oList.getItems（camlQuery）；
加载（collListItem）；
clientContext.executeQueryAsync（Function.createDelegate（this，this.onQuerySucceed），Function.createDelegate（this，this.onQueryFailed））；
}
函数onquerysucceed（发送方，参数）{
var listItemInfo=''；
var listItemEnumerator=collListItem.getEnumerator（）；
while（listItemEnumerator.moveNext（））{
var oListItem=listItemEnumerator.get_current（）；
计数器+=1；
标题[theCounter-1]=oListItem.get_项（“标题”）；
}
var HeaderDisplay=uq.uniq（标题）；
对于（var i=0；i
标记必须放在
中。如果您希望您的内容放在
之后，那么不要将其放在
中（可能将其放在
中），而是使用jQuery或将其放在
之后

此外，此代码可能是错误的：

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


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

这将使
成为TableElement
内部的最后一个
，该元素将位于其边框内。没有办法将
放在
内，并将
放在
周围的边框外。为此，您必须创建一个conta在
之后插入一个对象，并将内容放入该容器。
您应该看看我尝试的
insertAfter（）
以及
AFTER（）
它们只是附加在标题之间，这不是我想要的。您必须发布您的HTML，并告诉我们您希望将元素添加到哪里。我已经创建了一个元素
这是我想放置导航的地方menu@frankbilly-查看我在答案末尾添加的内容。另外，请注意，您的
.hover（）
代码也不正确。我有一种感觉。hover不正确，但我无法使其工作。我觉得这只是SharePoint的问题。（）我已经完成了您推荐的代码，它确实起了作用。但是，现在它没有放在正确的列下。它只放在第一列下。我记得我尝试过这一点，并认为我必须确保我将它附加到标题中是属于我的。我也质疑我使用
的决定。我最初使用的是
元素但是它产生了同样的结果。
$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {


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

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