javascript - 链接图标跳到父级下方

我正在尝试创建一个位于两个元素中的<li>，一个带有<a>的<span>和一个包含变量<a>的第二个html。但是，该变量是一个glyphicon，它跳到另一个<a>下面。我怎样才能解决这个问题？

var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li id=" + id + "><a href=\"#\" class=\"list-group-item\"><span>" + conversation.name + "</span></a>" + html + "</li>");

最佳答案

您似乎将类定义放在错误的项目上。我把它移到了李。

html="test"
id="6"
conversation={name:"bob"}
var html = "<a href=\"#\" id='removeBtn' class='glyphicon glyphicon-remove'></a>";
$('#conversations').append("<li class=\"list-group-item\" id=" + id + "><a href=\"#\" ><span>" + conversation.name + "</span></a>" + html + "</li>");

li {
  list-style-type:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<div id="conversations"></div>

关于javascript - 链接图标跳到父级下方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43610482/