Javascript 如何动态添加文本框而不丢失以前文本框的值？
我正在使用innerHTML动态添加文本框。代码示例如下所示：Javascript 如何动态添加文本框而不丢失以前文本框的值？,javascript,html,textbox,Javascript,Html,Textbox,我正在使用innerHTML动态添加文本框。代码示例如下所示： <html> <head> <script type="text/javascript" > var i=0; function add() { var tag = "<input type='text' name='" + i + "' /> <br/>"; document.getElementById("y").innerHTML +=
<html>
<head>
<script type="text/javascript" >
var i=0;
function add()
{
var tag = "<input type='text' name='" + i + "' /> <br/>";
document.getElementById("y").innerHTML += tag;
i++;
}
</script>
</head>
<body>
<input type="button" id="x" value="Add" onclick="add();" />
<div id="y"></div>
</body>
</html
var i=0；
函数add（）
{
var tag=“
”；
document.getElementById（“y”）.innerHTML+=标记；
i++；
}
是的，通过DOM操作：
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++;
}
这不会像innerHTML
那样触发浏览器的DOM解析器，使所有内容保持原样
（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);
};
函数添加（）{
//创建元素
变量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’）；
//您可以“链接”`appendChild`。
//'li.appendChild（d1.appendChild（la）；'与'li.appendChild（d1）；d1.appendChild（la）相同`
追加儿童（d1）、追加儿童（la）、追加儿童（s1）、追加儿童（s2）、追加儿童（s3）；
d1.附属儿童（d2）。附属儿童（ip）；
d2.儿童（d3）；
李.儿童(d4);；
集合属性(
[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'：“文本对齐：右；字体大小：14px；”，
{'class'：“ispan”，'xml:space'：“preserve”}，
{'class'：“m_elementwrapper”，'style'：“float:left；width:475px；”，
{'class'：“fieldcontent”，'type'：“text”，'style'：“字体系列：Arial，Helvetica，sans serif；字体大小：14px；宽度：244px；最大宽度：244px；”，'name'：''+i}，
{'class'：“fielderror”}，
{'style'：“清除：两者；字体大小：0；”}
]
);
var br=document.createElement（'br'）；//创建一个'br'元素，
var y=document.getElementById（“y”）；/“Get”the`y`元素，
y、 appendChild（li）；//将输入附加到'y`，
y、 appendChild（br）；//将br附加到'y`。
i++；
}
//将属性对象数组{key:value，key:value}应用于DOM元素数组。
函数集合属性（元素、属性）{
var el=元素长度，
al=属性。长度；
如果（el==al）{
对于（var n=0；n
使用jquery库
<html>
<head>
<script src='jquery.js' type="text/javascript"></script>
<script type="text/javascript" >
var i=0;
function add()
{
var tag = "<input type='text' name='" + i + "' /> <br/>";
var div_content=$('#y').append(tag);
i++;
}
</script>
</head>
<body>
<input type="button" id="x" value="Add" onclick="add();" />
<div id="y"></div>
</body>
</html>
var i=0；
函数add（）
{
var tag=“
”；
var div_content=$（'#y'）。追加（标记）；
i++；
}
我之前已经解决了这个问题，在替换innerHTML之前将所有值读取到一个数组中，然后再将它们写回来。通过这种方式，您可以将任何喜欢的内容写入div。以下内容适用于我尝试过的所有浏览器：
<html>
<head>
<script type="text/javascript" >
var i=0;
function add() {
if(i>0) {
values=new Array();
for(z=0;z<i;z++) {
values.push(document.getElementById(z).value);
}
}
var tag = '<input type="text" name="' + i + '" id="' + i + '" /> <br/>';
document.getElementById("y").innerHTML += tag;
if(i>0) {
for(z=0;z<i;z++) {
document.getElementById(z).value=values[z];
}
}
i++;
}
</script>
</head>
<body>
<input type="button" id="x" value="Add" onclick="add();" />
<div id="y"></div>
</body>
</html>
var i=0；
函数add（）{
如果（i>0）{
值=新数组（）；
对于（z=0；z0）{
对于（z=0；zt，使用.append（）之间并没有真正的显著区别）
和.innerHTML+=
。除了你必须加载一个外部库。但是如果我想在两者之间添加许多标记以将文本框放置在正确的位置，我的意思是使用css放置文本框。这取决于你希望新元素放置在标记中的位置。你能用附加信息编辑你的问题吗？@bharath:好的是的，这仍然可以通过DOM操作实现，但它需要（相当）更多的代码…编辑。
<html>
<head>
<script type="text/javascript" >
var i=0;
function add() {
if(i>0) {
values=new Array();
for(z=0;z<i;z++) {
values.push(document.getElementById(z).value);
}
}
var tag = '<input type="text" name="' + i + '" id="' + i + '" /> <br/>';
document.getElementById("y").innerHTML += tag;
if(i>0) {
for(z=0;z<i;z++) {
document.getElementById(z).value=values[z];
}
}
i++;
}
</script>
</head>
<body>
<input type="button" id="x" value="Add" onclick="add();" />
<div id="y"></div>
</body>
</html>