Функция с & lt; input & gt; - JavaScript [дубликат]

Да, через DOM Manipulation:

function add() {
    var tag = document.createElement('input'); // Create a `input` element,
    tag.setAttribute('type', 'text');          // Set it's `type` attribute,
    tag.setAttribute('name', i);               // Set it's `name` attribute,

    var br = document.createElement('br');     // Create a `br` element,

    var y = document.getElementById("y");      // "Get" the `y` element,
    y.appendChild(tag);                        // Append the input to `y`,
    y.appendChild(br);                         // Append the br to `y`.
    i++;
}

Это не вызывает парсер DOM браузера, как это делает innerHTML, оставив все неповрежденным.

(innerHTML заставляет браузер повторно анализировать всю DOM, потому что все может быть добавлено с помощью innerHTML, поэтому браузер ничего не может предсказать, в отличие от добавления узла к элементу.)

Теперь, чтобы добавить это:

<li class="ie7fix" style="width:620px;">
    <div class="m_elementwrapper" style="float:left;">
        <label class="fieldlabel" style="width:106px;float:left;padding-top:3px;" for="p1f4">
            <span>
                <span class="pspan arial" style="text-align:right;font-size:14px;">
                    <span class="ispan" xml:space="preserve">
                    </span>
                </span>
            </span>
        </label>
        <div style="float:left;width:475px;" class="m_elementwrapper">
            <input type="text" style="font-family:Arial, Helvetica, sans-serif;font-size:14px;width:244px;max-width:244px;" name="' + i + '"  class="fieldcontent">
            <div class="fielderror">
            </div>
        </div>
    </div>
    <div style="clear:both;font-size:0;">
    </div>
</li>

Вам понадобится:

function add() {
    // Create elements
    var d1 = c('div'),  s1 = c('span'), ip = c('input'),
        d2 = c('div'),  s2 = c('span'), li = c('li'),
        d3 = c('div'),  s3 = c('span'), la = c('label'),
        d4 = c('div');
    // You can "chain" `appendChild`.
    // `li.appendChild(d1).appendChild(la);` is the same as `li.appendChild(d1); d1.appendChild(la);`
    li.appendChild(d1).appendChild(la).appendChild(s1).appendChild(s2).appendChild(s3);
    d1.appendChild(d2).appendChild(ip);
    d2.appendChild(d3);
    li.appendChild(d4);

    setAttributes(
        [li, d1, la, s2, s3, d2, ip, d3, d4],
        [
            {'class':"ie7fix",              'style':"width:620px;"  },
            {'class':"m_elementwrapper",    'style':"float:left;"   },
            {'class':"fieldlabel",          'style':"width:106px;float:left;padding-top:3px;", 'for':"p1f4" },
            {'class':"pspan arial",         'style':"text-align:right;font-size:14px;"  },
            {'class':"ispan",               'xml:space':"preserve"  },
            {'class':"m_elementwrapper",    'style':"float:left;width:475px;"   },
            {'class':"fieldcontent",        'type':"text",      'style':"font-family:Arial, Helvetica, sans-serif;font-size:14px;width:244px;max-width:244px;", 'name':''+i},
            {'class':"fielderror"   },
            {'style':"clear:both;font-size:0;"  }
        ]
    );
    var br = document.createElement('br');     // Create a `br` element,
    var y = document.getElementById("y");      // "Get" the `y` element,
    y.appendChild(li);                         // Append the input to `y`,
    y.appendChild(br);                         // Append the br to `y`.
    i++;
}

// Apply a array of attributes objects {key:value,key:value} to a array of DOM elements.
function setAttributes(elements, attributes){
    var el = elements.length,
        al = attributes.length;
    if(el === al){
        for(var n = 0; n < el; n++){
            var e = elements[n],
                a = attributes[n];
            for(var key in a){
                e.setAttribute(key, a[key]);
            }
        }
    }else{
        console.error("Elements length " + el + " does not match Attributes length " + al);
    }
}

// Alias for shorter code.
function c(type){
    return document.createElement(type);
};