如果不存在，则将 HTML 附加到 div答案

【问题标题】：Append HTML to div if it doesn't exist如果不存在，则将 HTML 附加到 div
【发布时间】：2018-03-13 16:22:51
【问题描述】：

我需要检查一个元素是否存在，如果不存在，则使用Jquery 创建它。例如，我的页面中有以下 HTML 代码：

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-somethingelse">Something else</div>
</div>

我需要 g-array-item-image 类 div 位于两个 g-array-item 类 div 中。

这是我迄今为止尝试过的，但没有成功：

if(jQuery(".g-array-item-image").length < 0 ){  
jQuery( '.g-array-item' ).append( jQuery( '<div class="g-array-item-image">123</div>' ) );
}

想要的结果：

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

【问题讨论】：

这可以使用纯 javascript 来完成，请参阅此处对上一个问题的非常好的回复，它可能会帮助您实现所需的 stackoverflow.com/a/15182437/982901
@user9459537 发布了一个答案，您也可以查看代码 sn-p。

标签： javascript jquery append appendchild

【解决方案1】：

这里是完整的代码：

<div class="g-array-item">
        <div class="g-array-item-image">Awesome Picture</div>
        <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
        <div class="g-array-item-somethingelse">Something else</div>
</div>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.g-array-item').each(function(){
        if($(this).find('.g-array-item-image').length == 0){
            $(this).prepend('<div class="g-array-item-image">123</div>');
        }
    });
});
</script>

你需要在这里使用prepend 而不是append 否则它会在你的item-something之后弹出图像div。

【讨论】：

【解决方案2】：

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>


    <div class="g-array-item">
      <div class="g-array-item-image">Awesome Picture</div>
      <div class="g-array-item-somethingelse">Something else</div>
    </div>

    <div class="g-array-item">
      <div class="g-array-item-somethingelse">Something else</div>
    </div>
    <script>
      jQuery(document).ready(function() {
        jQuery(".g-array-item").each(function() {
          if (!(jQuery(this).children('.g-array-item-image').hasClass('g-array-item-image'))) {
            jQuery(this).append('<div class="g-array-item-image">123</div>');
          }
        });
      });

    </script>
  </body>

</html>

执行此操作的简单方法如下。

jQuery(".g-array-item").each(function() { 
      console.log(jQuery(this).children('.g-array-item-image').attr('class'));
      if (!(jQuery(this).children('.g-array-item-image').hasClass('g-array-item-image'))) {
        jQuery(this).append('<div class="g-array-item-image">123</div>');
      }
 });

【讨论】：

【解决方案3】：

它有一个简单的解决方案：

在每个具有g-array-item 类的元素上检查具有g-array-item-image 类的元素
如果元素不存在，则类g-array-item-image 的元素的长度将为0，您可以prepend() 将其放在具有类g-array-item 的div 内的顶层

$(document).ready(function(){
  $('.g-array-item').each(function(){
    if($(this).find('.g-array-item-image').length === 0){
      $(this).prepend('<div class="g-array-item-image">123</div>');
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="g-array-item">
    <div class="g-array-item-image">Awesome Picture</div>
    <div class="g-array-item-somethingelse">Something else</div>
</div>

<div class="g-array-item">
    <div class="g-array-item-somethingelse">Something else</div>
</div>

【讨论】：