如何有效地添加?在我用JavaScript创建的表单中添加许多字段

How can I add efficiently add many fields to a form I create in JavaScript?

本文关键字：添加 创建 表单 许多 JavaScript 字段 有效地      更新时间：2023-09-26

我有一个新的页面-新表单，我想连接到一些现有的服务器端内容。现在我有这个代码可以工作，但它有点笨重：

// 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();

我不确定你在问什么。你可能已经回答了自己的问题。但如果你想要这个功能，就来吧：

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

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

这将同时创建所有元素。

很明显，您可以使用函数，但为什么不让HTML解析器为您创建DOM呢？实际上，它比自己创建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，并使用很少的代码来做同样的事情。

相关文章：