需要将链接添加到不带.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);