Как я могу эффективно добавить много полей в форму, которую я создаю в JavaScript?

Question

У меня есть новая страница новой формы, и я хочу подключиться к некоторым существующим вещам на стороне сервера. Прямо сейчас у меня есть этот код, который работает, но он немного неуклюжий:

// make a form
var OrderStatusSearchQueryForm = document.createElement("form");

// make first input 
var Operation = document.createElement("input");
Operation.name="Operation";
Operation.value="Search";
OrderStatusSearchQueryForm.appendChild(Operation);

// make second input
var SearchFieldValue = document.createElement("input");
SearchFieldValue.name="SearchFieldValue";
SearchFieldValue.value=document.formonpage.searchString.value
OrderStatusSearchQueryForm.appendChild(SearchFieldValue);

// not shown, many more inputs like the above

// set a few important values from the form on the page

OrderStatusSearchQueryForm.submit();

Мне было интересно, смогу ли я написать функцию, которая бы просто принимала несколько параметров и делала то же самое. Функция позволила бы мне заменить вышесказанное следующим:

var OrderStatusSearchQueryForm = document.createElement("form");
stakmagic("Operation", "Search", OrderStatusSearchQueryForm);
stakmagic("SearchFieldValue", document.formonpage.searchString.value, OrderStatusSearchQueryForm);
OrderStatusSearchQueryForm.submit();

Answer 1

Я не уверен, что вы спрашиваете. Возможно, вы ответили на свой вопрос. Но если вы хотите эту функцию, вот вам:

function stakmagic(name, value, form) {
    var Input = document.createElement("input");
    Input.name = name;
    Input.value = value;
    form.appendChild(Input);
}

Answer 2

Очевидно, что вы могли бы использовать функции, но почему бы не позволить анализатору HTML создать DOM для вас, на самом деле значительно быстрее , чем создавать его самостоятельно.

var html = '<form id="myform">' +
           '<input name="Operation" value="Search" />' +
           '<input name="SearchFieldValue" value="' +
           document.formonpage.searchString.value +
           '" /></form>';

document.getElementById("form-container").innerHTML = html;

document.getElementById("myform").submit();

Очевидно, что даже этоне оптимально, так как в вашем javascript есть куча жестко закодированных html.Но эта проблема была и с вашим оригинальным javascript.В настоящее время самый простой и простой способ сделать это - шаблонов JavaScript .Вы сможете поддерживать HTML так же, как это был обычный HTML, и использовать очень мало кода для того же.

Answer 3

 var inps = "<input name='xx' value='xx' /><input name='xx' value='xx' /> .......etc";
 <form>
     <div id='mydiv'></div> 
 </form>
 document.getElementByID('mydiv').innerHTML( inps );

Это создаст все элементы одновременно.