Добавить в HTML-форму без потери текущей информации ввода формы в Javascript

Question

У меня есть выпадающий список, который создает форму на основе выбранных элементов.Так, если кто-то выбирает «foobar», он отображает текстовое поле, если он выбирает «сыр», он отображает переключатели.Затем пользователь может вводить данные в эти формы по мере их продвижения.Единственная проблема заключается в том, что при добавлении нового элемента формы вся остальная информация стирается.В настоящее время я использую следующее для добавления в форму:

document.getElementById('theform_div').innerHTML = 
    document.getElementById('theform_div').innerHTML + 'this is the new stuff';

Как я могу сохранить его в форме и добавить новое поле в конец?

Answer 1

Установка innerHTML уничтожает содержимое элемента и перестраивает его из HTML.

Вам нужно создать отдельное дерево DOM и добавить его, вызвав appendChild.

Например:

var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);   

Это гораздо проще сделать с помощью jQuery .

Answer 2

Шаг первый:

Добавьте jQuery к своим заголовкам:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>

Шаг второй:

Добавить, а не заменять данные в DIV следующим образом:

$("#theform_div").append("your_new_html_goes_here");

Answer 3

Самый правильный способ сделать это без использования фреймворка (такого как jQuery, Dojo, YUI):

var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);

document.getElementById('theform_div').appendChild(div);

innerHTML, хотя поддерживается большинством браузеров, не соответствует стандарту и - поэтому, не гарантируется работа.

Answer 4

Не используйте innerHTML для создания элементов формы. С innerHTML вы перезаписываете старый HTML новым HTML, который воссоздает все элементы. Вместо этого вам нужно использовать DOM для создания и добавления элементов.

Пример

function addRadioElement()
{
    var frm = document.getElementById("form_container");
    var newEl = document.createElement("input");
    newEl.type = "radio";
    newEl.name = "foo";
    newEl.value = "bar";
    frm.appendChild(newEl);        
}

Answer 5

Я бы предложил использовать jQuery и его функцию append.