JQuery如何在创建的元素中创建元素答案

【问题标题】：JQuery How to create element in created elementJQuery如何在创建的元素中创建元素
【发布时间】：2018-05-21 12:12:01
【问题描述】：

我正在处理一个code - https://jsfiddle.net/md_bender/pj6a1akz/3/。我需要创建新元素并将它们附加到现有元素 ul。通过创建元素和附加一切都可以。但我不知道如何在创建的元素中创建子元素。我需要创建

<img src="path"/>

在我之前在脚本中创建的 div 中。应该是这样的

<div class="img-w js-popup">
    <img src="path"/>
</div>
<a href="delete.php">Delete</a>

但只有我能做的就是创建为 div 的下一个兄弟

<div class="img-w js-popup"></div>
<img src="path"/>
<a href="delete.php">Delete</a>

谁能帮助我解决我的问题？

【问题讨论】：

只需要移动一个): jsfiddle.net/khrismuc/pj6a1akz/5
在 SO 处添加所有相关代码。如果您可以创建小提琴，请确保您可以创建 sn-p。点击<>在工具栏中创建一个sn-p。
@ChrisG 谢谢你！一切都很好。我不擅长 jquery，所以我没想到我可以将 .append($('') 包含在前一个中。

标签： javascript jquery html dom createelement

【解决方案1】：

在将 div 附加到 li 之前，您可以将 img 附加到 div。你也可以像这样写Fiddle

$('<li/>')
  .append($('<div/>', {
    'class': 'img-w js-popup',
  }).append($('<img/>', {
    'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
  })))
  .append($('<a/>', {
    href: 'delete.php',
    text: 'Delete'
  }))
  .appendTo('ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div>
      <img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
    </div>
    <a href="delete.php">Delete</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

问题是因为您的append() 调用是在li 本身上，而不是您刚刚添加的div。试试这个：

var $div = $('<div/>', { 
  'class': 'img-w js-popup' 
});
$('<img/>', { 
  'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80' 
}).appendTo($div)
	
$('<li/>').append($div).append($('<a/>', {
  href: 'delete.php',
  text: 'Delete'
})).appendTo('ul');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li>
    <div>
      <img src="//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80" alt="" />
    </div>
    <a href="delete.php">Delete</a>
  </li>
</ul>

话虽如此，您正在使用最冗长的方法来创建 HTML。由于您对所有属性进行硬编码，因此可以通过提供纯字符串来简化它 - 甚至可以通过克隆以前的 li 并附加它来简化。

【讨论】：

【解决方案3】：

如果不需要单个 DOM（li、div、img），则更容易创建静态字符串并将整个附加到列表中，就像这样（记住反斜杠）：

$('ul').append("<li><div><img src=\"//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80\" alt=\"\"/></div><a href=\"delete.php\">Delete</a></li>");

【讨论】：

感谢您的回答！我知道我可以用这种方式创建元素，但我不喜欢它。物件风格更舒适，仔细看。

【解决方案4】：

$('<li/>')
    .append($('<div/>', {
        'class': 'img-w js-popup',
    }))
    .append($('<div/>', {
        'id': 'idOFDiv'
    }))
    .append($('<a/>', {
        href: 'delete.php',
    text: 'Delete'
    }))
    .appendTo('ul');

 $("#idOFDiv").append($('<img/>', {
        'src': '//www.gravatar.com/avatar/9142888a2ae6160f2faec90134eeafa3/?default=&s=80'
    }));

【讨论】：