jQuery .html() and .append() rendering content differently to HTML DOM innerHTML property

I am creating some dynamic content using a MVC partial view that is returned to an AJAX call as a string. The dynamic content includes some Kendo UI widgets (drop-down lists, date pickers, etc.) (which are configured and created in the partial view) which are then rendered on the page. This all works fine when using jQuery .html() or .append() - everything loads fine and the Kendo widgets are initialised without having to do anything.

But due to the amount of dynamic content being loaded and the overall time it takes I was looking at using the HTML DOM innerHTML property as a better performing option, but this doesn't work. The content loads, but the Kendo controls aren't initialised, even though the partial view includes the JS used to initialise the widgets.

// this doesn't work
var container = document.getElementById("content_" + id);
container.innerHTML = result.Data.PartialView;

// this returns undefined,a nd $("#dropDownList_1").data() returns an empty {} object
$("#dropDownList_1").data("kendoDropDownList")

// but this works
$("#content_" + id).html(result.Data.PartialView);

Snippet from partial view which includes the JS to initialise the Kendo widget:

<input id="dropDownList_1" name="dropDownList_1" type="text" /><script>
    jQuery(function(){jQuery("#dropDownList_1").kendoDropDownList({"dataSource":[{"Text":"Day","Value":"1"},{"Text":"Week","Value":"2"},{"Text":"Month","Value":"3"}],"dataTextField":"Text","dataValueField":"Value","optionLabel":"Please select"});});
</script>

Any idea why using the HTML DOM innerHTML property doesn't execute the JS to initialise the widgets?