将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只有一个元素。