jQueryを使用して文字列内のHTMLを解析してタグを置き換える方法は？

Question

私は（読みやすいここunminified）このような文字列があります。

<div id="EditContainer"> 
    <button id="1126_1" class="saveCancel"><i class="fa fa-floppy-o editicon" aria-hidden="true"></i>Save Edit</button> 
    <button id="1126_2" class="saveCancel"><i class="fa fa-ban editicon" aria-hidden="true"> </i>Cancel Edit</button> 
</div> 

しかしとき：それはなるように、私は、EditContainerのdivの内容を交換したいのjQueryを使用した

var input='<div id="container" style="max-width: 310px;"> 
    <div class="popupheadermap"> 
     <b>YFC</b> 
    </div> 
    <input checked="checked" id="tab-1" name="tab-group" type="radio"> 
    <label for="tab-1">Administration</label> 
    <input id="tab-2" name="tab-group" type="radio"> 
    <label for="tab-2">Information</label> 
    <div id="content"> 
     <div id="content-1"> 
      <td>Id</td> 
      <td class="tablerow">1252</td> 
     </div> 
     <div id="content-2"> 
      <td>Type</td> 
      <td class="tablerow">Gym</td> 
     </div> 
    </div> 
</div> 
<div id="EditContainer"> 
    <button class="editMarker" id="1252"><i aria-hidden="true" class="fa fa-pencil editicon"></i>Edit Location</button> 
</div>'; 

を私は$(input).find('#EditContainer')と、私は空の出力を得る見つけるを使用します。

この文字列を解析するにはどうすればいいですか？EditContainer divの内容を置き換えますか？

Answer 1

#EditContainer要素が文字列のルートレベルにあるので、filter()ではなくfind()を使用する必要があります。これを試してみてください：

var input = '<div id="container" style="max-width: 310px;">' + 
 
    '<div class="popupheadermap">' + 
 
     '<b>YFC</b>' + 
 
    '</div>' + 
 
    '<input checked="checked" id="tab-1" name="tab-group" type="radio">' + 
 
    '<label for="tab-1">Administration</label>' + 
 
    '<input id="tab-2" name="tab-group" type="radio">' + 
 
    '<label for="tab-2">Information</label>' + 
 
    '<div id="content">' + 
 
     '<div id="content-1">' + 
 
      '<td>Id</td>' + 
 
      '<td class="tablerow">1252</td>' + 
 
     '</div>' + 
 
     '<div id="content-2">' + 
 
      '<td>Type</td>' + 
 
      '<td class="tablerow">Gym</td>' + 
 
     '</div>' + 
 
    '</div>' + 
 
'</div>' + 
 
'<div id="EditContainer">' + 
 
    '<button class="editMarker" id="1252"><i aria-hidden="true" class="fa fa-pencil editicon"></i>Edit Location</button>' + 
 
'</div>'; 
 

 
var $input = $(input); 
 
$input.filter('#EditContainer').html('<button id="1126_1" class="saveCancel"><i class="fa fa-floppy-o editicon" aria-hidden="true"></i>Save Edit</button><button id="1126_2" class="saveCancel"><i class="fa fa-ban editicon" aria-hidden="true"> </i>Cancel Edit</button>'); 
 
$input.appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>