Create TextBox - In Code (HTML)

by LeeMellinger

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="mainForm"</div>
   
<!-- 
<input id="dateofBirth1" />
<input id="dateofBirth2" />
<input id="dateofBirth3" />
-->

JavaScript

$(document).ready (function () {
    
    var mainForm = document.getElementById('mainForm');
    
    createTextBox2('mainForm', 'fld1', 'fld1');
    $("#fld1").kendoDatePicker();
    // addLine(mainForm);
    mainForm.appendChild(document.createElement('br'));
    mainForm.appendChild(document.createElement('br'));
    
    createTextBox('mainForm', 'fld2', 'fld2');
    mainForm.appendChild(document.createElement('br'));
    mainForm.appendChild(document.createElement('br'));
    
    createTextBox('mainForm', 'fld3', 'fld3');
    mainForm.appendChild(document.createElement('br'));
    mainForm.appendChild(document.createElement('br'));
    
    createTextBox('mainForm', 'fld4', 'fld4');
    mainForm.appendChild(document.createElement('br'));
    mainForm.appendChild(document.createElement('br'));
    
});

function addLine(target) {
    target.appendChild(document.createElement('br'));
}

// Create textbox in 'div'.
function createTextBox(targetName, id, name) {
    
    var target = document.getElementById(targetName);
    var oFrag = document.createDocumentFragment();
    
    var iptNode = document.createElement("input");
    iptNode.setAttribute("type", "text");
    iptNode.setAttribute("id", id);
    iptNode.setAttribute("name", name);
    iptNode.setAttribute("class", "k-textbox");
    oFrag.appendChild(iptNode);
    
    target.appendChild(oFrag);
}

// Create textbox in 'div'.
function createTextBox2(targetName, id, name) {
    
    var target = document.getElementById(targetName);
    var frag = document.createDocumentFragment();
    
    // Label
    var labelNode = document.createElement('label');
    labelNode.setAttribute("type", "label");
    labelNode.innerText = 'test   ';
    
    // Input
    var inputNode = document.createElement("input");    
    inputNode.setAttribute("type", "text");
    inputNode.setAttribute("id", id);
    inputNode.setAttribute("name", name);
    inputNode.setAttribute("class", "k-textbox");
   ...