Связать событие после перезагрузки страницы и создать новый элемент html, используя только Knockout.js, HTML и JS?

Вы можете связывать элементы после загрузки страницы с помощью ko.applyBindings(viewModel, ElementSelector), например:

ko.applyBindings(myModel, $("#myDiv"));

Однако это не то, что вы обычно хотите делать. Гораздо проще использовать привязку If в Knockout, которая будет динамически добавлять или удалять дочерние элементы со страницы.

<input type="checkbox" data-bind='checked: showChild' />
<div id="container" data-bind="if: showChild">
   <!-- stuff here will only be generated if the checkbox is selected -->
</div>

Если у вас было несколько разных элементов для показа, основанных на значении чего-либо, скажем, в списке выбора, вы можете использовать функцию шаблона:

//viewmodel properties
self.Options = ko.observableArray(["Name", "Age", "Height"])
self.TemplateToUse = ko.observable() 


//html
<select data-bind="options: Options, value: TemplateToUse">
</select>

<div data-bind='template: { name: TemplateToUse }'>
   <!-- template whose name is selected value -->
</div>

//templates
<script type="text/html" id="Age">
   <span>Age</span>
</script>

<script type="text/html" id="Name">
   <span>Name</span>
</script>

<script type="text/html" id="Height">
   <span>Height</span>
</script>