Question

我想以这种方式将li元素添加到ul

<li>
    <div>
        <span>Ad</span>
    </div>
    <div>
        <span><a href="#">A title.</a></span>
        <span>Some text here</span>
     </div>
</li>

但通过以下代码

$(document).ready(function() {
  $('#notify').click(function(e) {
    $('#ul_addon').append(
      $('<li><div>').append(
        $('<span>Ad</span>'),
        $('</div>'),
        $('<div>').append(
          $('<span><a href="#">A title.</a></span>'),
          $('<span"></span>').html("New Text")
        ),
        $('</div></li>')
      )
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
  <li>
    <div>
      <span>Ad</span>
    </div>
    <div>
      <span><a href="#">A title.</a></span>
      <span>Some text here</span>
    </div>
  </li>
</ul>

<button id="notify" type="button">Add</button>

我正在

<li>
    <div></div>
    <span>Ad</span>// this <span> is out of the <div> above
    <div>
        <span><a href="#">A title.</a></span>
        <span>Some text here</span>
     </div>
</li>

我希望<span>元素中的<div>为

<div>
   <span>Ad</span>
</div>

但不知道得到所需的结果。

免责声明： 我是JS世界的新手，请不要介意，如果你觉得这很愚蠢。

Answer 1

你需要将div附加到li而不是像下面那样创建div

$('<li><div>') 

// will create elements and it will look like <li><li><div></div>

使用以下代码

＆＃13;

    $(document).ready(function() {
      $('#notify').click(function(e) {
        $('#ul_addon').append(
          $('<li>').append(
            $('<div><span>Ad</span></div>'),
            
            $('<div>').append(
              $('<span><a href="#">A title.</a></span>'),
              $('<span"></span>').html("New Text")
            ),
            $('</div></li>')
          )
        );
      });
    });

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <ul id="ul_addon">
      <li>
        <div>
          <span>Ad</span>
        </div>
        <div>
          <span><a href="#">A title.</a></span>
          <span>Some text here</span>
        </div>
      </li>
    </ul>

    <button id="notify" type="button">Add</button>

＆＃13;

Answer 2

您需要了解jQuery中的追加和元素创建是如何工作的。您不需要将结束标记用作单独的附加。它不像html字符串连接那样工作。

当您提供$('<div>')时，它正在创建html元素<div></div>。

当您使用$('<li><div>')时，它会创建<li><div></div></li>，但如果您将append()链接到此，则下一个追加将适用于父元素li。这就是原因，跨度超出了div。

$(document).ready(function() {
  $('#notify').click(function(e) {
    $('#ul_addon').append(
      $('<li/>').append(
        $('<div/>').append(
          $('<span>Ad</span>')
        ),
        $('<div/>').append(
          $('<span><a href="#">A title.</a></span>'),
          $('<span"></span>').html("New Text")
        )
      )
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
  <li>
    <div>
      <span>Ad</span>
    </div>
    <div>
      <span><a href="#">A title.</a></span>
      <span>Some text here</span>
    </div>
  </li>
</ul>

<button id="notify" type="button">Add</button>

Answer 3

问题是因为您必须一次创建一个完整的元素 - 也就是说它打开和结束标记（如果有的话）。您不能使用jQuery仅插入结束标记。

要修复代码，如果您只使用一个附加内容，它会更简单，效果更好：

$('#notify').click(function(e){
    $('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span">New Text</span></div></li>'));
});

Answer 4

为什么你不想保持简单而不是使用太多append函数？

$(document).ready(function() {
      $('#notify').click(function(e){
        $('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span>New Text</span></div></li>')          
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">    
    <li>
        <div>
            <span>Ad</span>
        </div>
        <div>
            <span><a href="#">A title.</a></span>
            <span>Some text here</span>
        </div>
    </li>                                            
</ul>

<button id="notify" type="button">Add</button>

没有得到使用jquery将li元素添加到ul的正确方法

4 个答案: