Question

我正在尝试将文本和嵌套div附加到列表组的末尾，我想要获得这样的HTML输出：

<div class="list-group-item">
  <div class="small>
    Username
    <div class="pull-right">
      <a class="btn btn-link btn-xs" href="url">edit</a>
    </div>
  </div>
</div>

我的大多数jQuery代码都基于此post中已接受的解决方案，这就是我目前所拥有的：

$('<div>').attr('class', 'list-group-item').html(
  $('<div>').attr('class', 'small').text('Username').html(
    $('<div>').attr('class', 'pull-right').html($('<a>').attr({
          'class': 'btn btn-link btn-xs', 
          'href': 'url'
    }).text('edit')))).appendTo(this.find('.list-group'));

除了用户名文本之外，所有内容都会附加，但如果我在用户名后删除所有内容并运行此代码：

$('<div>').attr('class', 'list-group-item').html(
  $('<div>').attr('class', 'small').text('Username'))
.appendTo(this.find('.list-group'));

成功附加了用户名文字。我想错过什么才能让他们全部追加？感谢。

Answer 1

我已经尝试过您的代码，我认为您的问题来自于您直接在.text（＆＃39;用户名＆＃39;）上使用.html（...）的事实，所以。文本（＆＃39;用户名＆＃39;）将被第一个删除。所以你可以用类似的东西（在我身边测试）来做到这一点：

$('<div>')
            .attr('class', 'list-group-item')
            .html('Username' +
                $('<div>')
                .attr('class', 'small')
                .html(
                    $('<div>').attr('class', 'pull-right').html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                ).html()
            )
            .appendTo(this.find('.list-group'));

部分：

.html(
                    $('<div>').attr('class', 'pull-right').html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                )

将构建你的div＆＃39; pull-right＆＃39;及其内容。然后，使其后跟一个简单的.html（），它会将其html内容作为一个字符串返回，您可以将其与您的字符串＆＃39;用户名＆＃39;连接。

也许它不是这样做的好方法，但似乎有效。

编辑：

好的，我很抱歉@Ross，你对＃div＆＃34;小＆＃34;没有创建。看起来.html（）是罪魁祸首，杀死了＆＃39;在这种情况下它附加的div。所以使用.text（＆＃39;用户名＆＃39;）然后.append（myHtmlCode ...）使它对我有用，就像这样：

$('<div>').attr('class', 'list-group-item')
            .html(
                $('<div>').attr('class', 'small')
                .text('Username')
                .append(
                    $('<div>').attr('class', 'pull-right')
                    .html(
                        $('<a>').attr({
                              'class': 'btn btn-link btn-xs', 
                              'href': 'url'
                        }).text('edit')
                    )
                )
            )
            .appendTo(this.find('.list-group'));

Answer 2

我想轻松一点：

 $(document).ready(function(){

        var html = '<div class="list-group-item"><div class="small">Username<div class="pull-right"><a class="btn btn-link btn-xs" href="url">edit</a></div></div></div>';

    $(html).appendTo('#appender');                      

    });

的jsfiddle：

http://jsfiddle.net/0vg97uhy/

在jQuery中附加嵌套div时不附加文本

2 个答案: