Question

使用 javascript 动态创建元素

2010-04-07

2364

javascript

我需要在用户单击链接时动态创建文本框。并且我还需要根据用户决定删除该文本框。我正在尝试以下脚本。

    <script language="JavaScript" type="text/javascript">
var Dom = {
  get: function(el) {
    if (typeof el === 'string') {
      return document.getElementById(el);
    } else {
      return el;
    }
  },
  add: function(el, dest) {
    var el = this.get(el);
    var dest = this.get(dest);
    dest.appendChild(el);
  },
  remove: function(el) {
    var el = this.get(el);
    el.parentNode.removeChild(el);
  }
};
var Event = {
  add: function() {
    if (window.addEventListener) {
      return function(el, type, fn) {
        Dom.get(el).addEventListener(type, fn, false);
      };
    } else if (window.attachEvent) {
      return function(el, type, fn) {
        var f = function() {
          fn.call(Dom.get(el), window.event);
        };
        Dom.get(el).attachEvent('on' + type, f);
      };
    }
  }()
};
Event.add(window, 'load', function() {
  var i = 0;
  Event.add('add-element', 'click', function() {
    var el = document.createElement('p');
    el.innerHTML = '<br><input type="text">Remove(' + ++i + ')';
    Dom.add(el, 'content');
    Event.add(el, 'click', function(e) {
      Dom.remove(this);
    });
  });
});

</script>
<style>
#add-element {
  cursor: pointer;
}

</style>
<body>

<div id="doc">
  <p id="add-element">Add Elements</p>
  <div id="content"></div>
</div>

</body>

它将创建元素并删除元素。但是，它不允许我在新创建的文本框中输入文本（如果需要）。我出了什么问题。请帮助继续...请

Answer 1

What is wrong with me.

你有点太苛刻了！

你向 <p> 元素添加了删除行的 click 事件处理程序。单击事件通过其祖先向上冒泡，因此如果你单击 <input> 元素以聚焦它，其父级 <p> 也会收到单击，从而删除该行。

我建议只将单击事件放在“删除”文本上。例如：

var row= document.createElement('div');
val remover= document.createElement('div');
var input= document.createElement('input');
remover.appendChild(document.createTextNode('Remove('+(++i)+')'));
row.appendChild(input);
row.appendChild(remover);
Dom.add(row, 'content');
Event.add(remover, 'click', function(e) {
    Dom.remove(row);
});

尽管为了方便访问，最好将“添加”和“删除”操作按钮（ <input type="button"> 或 <button> ）设计成不像按钮，如果您不希望它们看起来像按钮的话。

Answer 2

试试这个。

 <script LANGUAGE="JavaScript"> 
     function addElement() {
        var num = document.getElementById('theValue').value;
        if(num == "0"){
      var ni = document.getElementById('pop');
      var newdiv = document.createElement('div');
      var divIdName = 'newDiv';

      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML = " <table>"+
                            "<tbody>"+
                                "<tr>"+
                                    "<td>Name</td>"+
                                    "<td><input type=\"text\" id=\"name\" value=\"\" /></td>"+
                                "</tr>"+

                               " <tr>"+
                                    "<td></td>"+
                                    "<td><input type=\"submit\" value=\"save\" onclick=\"removeElement()\"/></td>"+
                                "</tr>"+
                            "</tbody>"+
                       " </table>";
      ni.appendChild(newdiv);
      document.getElementById('theValue').value = "1";
        }

    }
    function removeElement() {
        document.getElementById('theValue').value = "0";
      var d = document.getElementById('pop');
      var olddiv = document.getElementById('newDiv');
      d.removeChild(olddiv);
    }
    </script>

    <body>

    <div id="doc">
     <a href="javascript:addElement()">Add Element</a>
      <input type="hidden" value="0" id="theValue" /> 
      <div id="pop"></div>

    </div>

    </body>

Answer 3

使用 jquery 或prototype 等 javascript 框架。这将确保您的代码兼容跨浏览器，并且还会减少代码行数。