单击jQuery追加方法

Question

如何通过单击按钮在div内部附加div？ [点击此按钮] [1] 这是我的按钮，其id =“condition”

<button type="submit" class="waves-effect waves-light btn" id="condition" value="Add">Condition</button></div>

[这应该附加] [2] 每当我点击按钮

时，我都希望o / p如下所示

在点击1上，应显示以下内容。附加div内的内容

sensor <options>
Condition: <option>
Threshold: <input>

第二次单击按钮时，应显示以下内容

sensor <options>
Condition: <option>
Threshold: <input>

$(document).ready(function() {
  $("#condition").click(function() {
    $('#shw').append($('.hidden').clone());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <fieldset>
    <table class='addRuleHolder'>
      <tr>
        <td class="label-col">
          <label>Sensor:</label>
        </td>
        <td>
          <select>
            <option value="1">S1</option>
            <option value="2">S2</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Condition:</label>
        </td>
        <td>
          <select>
            <option value="1">&lt;=</option>
            <option value="2">&gt;=</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Threshold Value:</label>
        </td>
        <td>
          <input type="text">
        </td>
      </tr>

    </table>
  </fieldset>
</div>


<div style="margin-top: 20px; float:right;padding-right:15px">
      <button  class="waves-effect waves-light btn" id="condition" value="Delete">condition</button>
    </div>
<div id="shw"></div>

Answer 1

您需要删除克隆中隐藏的类。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#condition").click(function() {
    $('#shw').append($('.hidden').clone().removeClass("hidden"));
  });
});

＆＃13;

.hidden {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <fieldset>
    <table class='addRuleHolder'>
      <tr>
        <td class="label-col">
          <label>Sensor:</label>
        </td>
        <td>
          <select>
            <option value="1">S1</option>
            <option value="2">S2</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Condition:</label>
        </td>
        <td>
          <select>
            <option value="1">&lt;=</option>
            <option value="2">&gt;=</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="label-col">
          <label>Threshold Value:</label>
        </td>
        <td>
          <input type="text">
        </td>
      </tr>

    </table>
  </fieldset>
</div>


<div style="margin-top: 20px; float:right;padding-right:15px">
  <button class="waves-effect waves-light btn" id="condition" value="Add">condition</button>
</div>
<br style="clear:both"/>
<div id="shw"></div>

＆＃13;

＆＃13;

＆＃13;