jquery replacewith（）函数

Question

我能够克隆模板并将其附加到div，但是，我希望能够在克隆和追加相同的过程之后用另一个克隆的模板替换附加的模板。

HTML：

<div style="display:none;" id="temp1">
  <p>This is a template to be cloned</p>
</div>
<div style="display:none;" id="temp2">
  <p>No, this is another temp that got cloned</p>
</div>
<select id="cloneOptions">
  <option value="0">Select One</option>
  <option value="1">Clone 1</option>
  <option value="2">Clone 2</option>
</select>
<button type="button" id="cloning">Click to clone</button>
<div id="cloned" style="padding:2%;"></div>

jQuery的：

  $(document).ready(function() {
  $('#cloneOptions').on('change',function(){
    if(this.value === "1"){
      $('#cloning').one('click',function() {
        var clone = $('#temp1').clone().attr('class', 'genID');
        alert('Hello');
        $(clone).show();
        $('#cloned').append(clone);
        if($('#cloned div').hasclass('genID')){
          $('#cloned div').replacewith(clone);
        }                
        $('#cloneOptions').val('0');
      });
    }
    else if(this.value === "2"){
      $('#cloning').one('click',function() {
        var clone = $('#temp2').clone().attr('class', 'genID');
        alert('Hello');
        if($('#cloned div').hasclass('genID')){
          alert('Clone');
          $('#cloned div').replacewith(clone);
        }
        $(clone).show();
        $('#cloneOptions').val('0');
      });
    }
  });
});

请参考我的小提琴：

https://jsfiddle.net/sunit2016/nLstx3so/1/

对此有任何帮助将不胜感激。

Answer 1

将replacewith更改为$('#genID').replaceWith(clone); Javascript区分大小写。