2

我正在使用 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

添加新文本框时，是否有任何方法可以动态添加文本框而不会丢失先前文本框的值？
已经发布了类似的问题，但没有答案:(

如果我想在这种情况下添加文本框怎么办：

function add() {
   var element='<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>';
   document.getElementById("addskills").innerHTML += element;
   i++;
}
4

3 回答 3

5

是的，通过 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++;
}

这不会像 ainnerHTML那样触发浏览器的 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);
};
于 2013-01-23T15:38:21.420 回答
1

我之前通过在替换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>
于 2013-01-24T07:28:12.743 回答
1

使用 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>
于 2013-01-23T15:46:54.803 回答