Добавление дочернего объекта сбрасывает предыдущее добавленное значение элемента в JavaScript

Question

Ситуация такова: у меня есть форма с некоторыми текстовыми полями ввода и кнопкой, которая вызывает функцию add() при нажатии. Это HTML-код:

<div id="resultdiv" style="display: none" align="center"> 
    <TEXTAREA id="resultcode" style="width: 100%; height: 70%"></TEXTAREA> 
</div> 
<div align="center" width="100%"> 
    <form> 
     <input type="text" name="atrib" value="atrib name"><input type="text" name="val" value="default value"><br> 
     <div id="bar"></div> 
     <input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();"> 
    </form> 
</div> 

add() функция добавляет две новые входные формы в де DIV с идентификатором bar. Это работает без каких-либо проблем, проблема в том, что если я добавлю новое текстовое поле и напишу какое-то значение, отличное от значения по умолчанию, как только я снова нажму кнопку Add, будет создано новое текстовое поле, но значение предыдущего Созданное текстовое поле снова будет изменено на значение по умолчанию !!!

Вот код JavaScript с add() функции:

function add() { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 
    var element2 = document.createElement("input"); 

    //Assign different attributes to the element. 
    element.setAttribute("type", "text"); 
    element.setAttribute("value", "atrib name"); 
    element.setAttribute("name", "atrib"); 
    element2.setAttribute("type", "text"); 
    element2.setAttribute("value", "default value"); 
    element2.setAttribute("name", "val"); 

    // the div id, where new fields are to be added 
    var bar = document.getElementById("bar"); 

    //Append the element in page (in span). 
    bar.appendChild(element); 
    bar.appendChild(element2); 
    bar.innerHTML += "<br>"; 
} 

А вот jsfiddle всего приложения: http://jsfiddle.net/3a1kojgn/

Я не понимаю, почему значение предыдущего динамически добавляется TextBox сбросы при добавлении другого, если я создаю новые элементы на каждом вызове add(). Любые намеки?

Answer 1

Try This

See the working Demo Here

Вам нужно изменить линию bar.innerHTML += "<br>"; к bar.appendChild(element3);

function add() { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 
    var element2 = document.createElement("input"); 
    var element3 = document.createElement("br"); // Create element of <bt/> 
    //Assign different attributes to the element. 
    element.setAttribute("type", "text"); 
    element.setAttribute("value", "atrib name"); 
    element.setAttribute("name", "atrib"); 
    element2.setAttribute("type", "text"); 
    element2.setAttribute("value", "default value"); 
    element2.setAttribute("name", "val"); 

    // the div id, where new fields are to be added 
    var bar = document.getElementById("bar"); 

    //Append the element in page (in span). 
    bar.appendChild(element); 
    bar.appendChild(element2); 
    bar.appendChild(element3); // add <br/> element 
} 

JSFIDDLE

ОБНОВЛЕНИЕ: - Ниже свойства элемента DOM может привести к браузеру, чтобы выполнить эксплуатацию REflow

• innerHTML
• offsetParent
• style
• scrollTop

innerHTML вызовет только перезапуск при изменении DOM.

innerHTML изменяет HTML-код объекта, который, безусловно, может повлиять на размер и положение и вызовет хотя бы частичное отражение.

See the reference link