Jquery append（）在没有关闭标记的情况下无法处理输入

我编写了自己的Jquery月选择器控件。月份选择器位于

中，它应该依次附加到我调用它的

字段

为了澄清，以下是代码：

(function ($) {
    //dict has to be a serialized dictionary. The dictionary needs to have years (as numbers) as keys and for each year a list of numbers representing the months.
    //Only the provided years/month will be serialized as html.
    //Sample usage (Razor): 
    //var json = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Periods.ToArray())); 
    //$('#monthPicker').CondatoMonthPicker(json);
    $.fn.CustomMonthPicker = function (dict) {
        debugger;
        //Construct HTML
        var wrapper = $(this);

        $monthPickerHeaderHtml = $('some html...');
        wrapper.append($monthPickerHeaderHtml);
        };
})(jQuery);

正如您从我的代码中注意到的，我使用的是MVC Razor。因此，我使用它来实例化包含日期选择器的字段：

@Html.TextBoxFor(model => model.TimePeriod, new { @id = "custom-datepicker", @type = "date", @class = "ms-TextField-field" })     

但是，这将生成以下html：

<input autocomplete="off" class="ms-TextField-field" data-val="true" data-val-date="The field TimePeriod must be a date." data-val-required="The TimePeriod field is required." id="custom-datepicker" name="TimePeriod" type="date"> 

正如您所看到的，它不是附加我的自定义html，而是插入它并在它后面添加一个结束标记，从而阻止我的整个构造显示在我的页面上。有人知道为什么会发生这种情况以及如何解决吗

编辑：我想我的措辞不够清楚。我不想设置我的

字段的值。不知何故，JQuery获得了输入元素，插入了我的html并在末尾添加了一个结束标记，而实际上它应该首先添加一个结束标记，然后在该结束标记之后附加我的自定义html，所以它看起来像这样：

<input ...></input>
My custom html...

我的自定义html。。。

通常输入没有结束标记，而是使用value属性。 当您更改输入的val（）而不是追加时会发生什么。如果您需要的话，文本区域将更适合于使用输入区域打开和关闭

wrapper.val($monthPickerHeaderHtml);

---

这是我发现的一篇相关文章：

我想你误解了我的问题，我不想设置输入html字段的值，我想在它后面附加我的自定义html。但不知何故，jquery插入它是因为它找不到结束输入标记，而它应该先添加一个结束标记，然后在该结束标记之后附加我的html。没错，我确实误解了，但我认为通过理解void元素可以回答这个问题。请参阅<代码>输入标记不允许有结束标记（即使是像

这样的短结束标记在技术上也是不正确的，除非在XHTML中）。您也不能在

输入

标记中嵌入元素（但您可以在

标记中嵌入元素）。此外，请制作一个工作示例来演示您的问题（以防我们误解）。编辑：

输入

元素在HTML中没有结束标记。句号。这是：

这是要追加的。

。没有结束标记，因为Chrome代表它。如果你看不到这一点，你需要做一个最低限度的可行的例子来说明这个问题，这样它可以被详细审查。不过，我怀疑您的ASP（或其他）代码正在这样做。您可能也应该在问题中添加相应的标记。这里是：您的

this

（因此，

包装器

）指的是

输入，而不是您认为的
div
。您可以使用jQuery选择up（
$.closest（）
或
$.parent（）
），或者修改插件以首先获取父级。或者使用它是因为
$.append（）
使用当前元素并向其添加元素；它不会猜测“没有结束标记，让我在元素后面添加”。您看到的是浏览器生成的DOM的表示，它应该仅用作指南。在这种情况下，浏览器会看到一个非文本节点子节点，并将一个结束标记添加到该标记中。但实际上，它只是
input
节点的一个子节点（使用DOM方法是可行的，但不明智）。
wrapper.val($monthPickerHeaderHtml);