將HTML附加到JQuery響應對象

Question

我無法將html附加到ajax jQuery由於某種原因獲取請求。

這裏是我想要的HTML代碼添加到正在從阿賈克斯GET請求返回的HTML的一部分：

<div id="EndDateRange"> 
    <input class="text-box single-line" data-val="true" data-val- 
    date="The field Enter End Date: must be a date." data-val- 
    required="Please enter an End Date." id="EndDate" name="EndDate" 
    type="datetime" value="6/3/2017 1:04:15 PM" /> 
    <span class="field-validation-valid" data-valmsg-for="EndDate" data- 
    valmsg-replace="true"></span> 
    <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 
    1:04:15 PM" /> 
</div> 

，這裏是jQuery的：

$(response).find('#EndDate[type=hidden]').append("<div><span>Add</span</div>"); 

對於一些原因這是行不通的。

---

還是無法得到這個工作。這裏有更多的細節：

這裏是 「GET」 請求：

function showDates() { 
var DatesViewRequest = $.ajax({ 
    type: 'GET', 
    url: searchDatesUrl, 
    cache: false, 
    async: isAsync, 
    contentType: 'text/html', 
    xhrFields: { 
     withCredentials: true 
    }, 
    error: (function (error, variable) { 
     alert('There was an error with the request'); 
    }) 
}); 
$.when(DatesViewRequest).done(function (response) { 
    var picklist = $('<select>', { 
     name: 'ValueNamesWebIds', 
     id: 'value_name', 
     multiple: 'multiple' 
    }) 
    .attr('size', '15') 
    .addClass('form-control') 
    .on('change', function() { 
     SetHiddenValues('value_name', 'ValueNames', 'true'); 
     EnableDisableButtons(); 
    }) 

    //var element = $(response).find('#EndDate[type=hidden]'); 

    $(response).find('#EndDate[type=hidden]').after('<div>Add</div>'); 

    $("#DisplayDateInputFields").append(response); 

    $("#VerificationAndValidation").hide(); 

    InitializeDateFields(); 
}); 

}

下面是從 「GET」 請求返回的HTML的一部分：

<form action="SearchDate" id="Form" method="post"> <div 
class="form-group"> 
    <fieldset> 
     <div class="row" id="DateRangeValues"> 
      <div class="col-sm-6 dateWidth"> 
       <div id="StartDateLabel"> 
        <label class="bold control-label" for="StartDate">Enter Start Date: </label> 
       </div> 
       <div id="StartDateRange"> 
        <input class="text-box single-line" data-val="true" data-val-date="The field Enter Start Date: must be a date." id="StartDate" name="StartDate" type="datetime" value="" /> 
        <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> 
        <input id="StartDate" name="StartDate" type="hidden" value="" /> 
       </div> 
      </div> 
      <div class="col-sm-6 dateWidth"> 
       <div id="EndDateLabel"> 
        <label class="bold control-label" for="EndDate">Enter End Date: </label> 
       </div> 
       <div id="EndDateRange"> 
        <input class="text-box single-line" data-val="true" data-val-date="The field Enter End Date: must be a date." data-val-required="Please enter an End Date." id="EndDate" name="EndDate" type="datetime" value="6/3/2017 11:51:48 AM" /> 
        <span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span> 
        <input id="EndDate" name="EndDate" type="hidden" value="6/3/2017 11:51:48 AM" /> 
       </div> 
      </div> 
     </div> 

等

Answer 1

您應該在該元素後面追加它，而不是在它之內。

$(response).find('#EndDate').after("<div><span>Add</span</div>"); 

，並使用[type=hidden]是可選的，你可能有與EndDate ID只有一個元素。