需要將鏈接添加到不帶.append（）的列表項的文本

Question

console.log(data)
var link
$listSelector = $("#top5CompaniesList") //Your list element
$.each(data.result, function(i, obj) {
    $listSelector.append('<li>');
    link = $('<a href="dashboard.php#companyInfo?'+obj.symbol+'">'+obj.symbol+'</a>').click(function(){
        $('.nav-pills a[href=#companyInfo]').tab('show') ;
        $('body').scrollTop(0);
        $('#companySearchInput').val(obj.symbol);
        $('#companySearchButton').click();
        return false;
    });
    $listSelector.append(link);
    $listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>');         
});

使用上面的代碼，我試圖將列表項添加到包含鏈接的列表中，該鏈接具有我設計的自定義行為。 這種行為是可行的，除了在每個.append（）調用發生的頁面上有一個換行符之外，我希望列表項顯示為一條連續的行。 我嘗試同時使用.wrap（）和.wrapInner（），但是它們似乎替換了列表項的整個innerHTML。 老實說，我知道這可能是解決方案，但我似乎無法將邏輯包扎起來。 非常感謝任何幫助或朝正確方向的推動。

Answer 1

問題在這里：

$listSelector.append('<li>');
// ...
$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>'); 

首先是一些理論。 您不能將部分HTML添加到文檔中。 網頁本身不包含HTML。 它由元素組成，HTML只是表示這些元素並告訴瀏覽器如何構建它們的標記語言。 從這個角度看，添加一個打開的<li>元素而不關閉它是沒有意義的：DOM中不能有一半的元素。

當您有$listSelector.append('<li>')您$listSelector.append('<li>')整個<li>元素附加到文檔中。 它完全等同於$listSelector.append('<li></li>') 。 當您以后擁有$listSelector.append('<br> Otherdata: '+obj.otherdata+'</li>')它完全等同於$listSelector.append('<br> Otherdata: '+obj.otherdata+'<li></li>') –瀏覽器不會“記住”之前有一個打開的<li>標記，因此它“修復”了損壞的HTML。

多余的<li>元素是導致布局看起來不完整的原因。

要修復此問題，請首先創建<li>元素，然后將其內容添加到其中，然后將其附加到父元素中：

link = $('<a href="dashboard.php#companyInfo?'+obj.symbol+'">'+obj.symbol+'</a>').click(function(){
    $('.nav-pills a[href=#companyInfo]').tab('show') ;
    $('body').scrollTop(0);
    $('#companySearchInput').val(obj.symbol);
    $('#companySearchButton').click();
    return false;
});

$('<li>')
    .append(link)
    .append('<br> Otherdata: '+obj.otherdata)
    .appendTo($listSelector);