dynamically create element using javascript

Question

I need to create textbox dynamically when user click a link.And also i need to remove that textbox according to user decission.I am trying the following script.

    <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>

It will create element and remove the element.But, it not allow me to enter text in newly created textbox( if i need).What is wrong with me.Please help to go forward...please

bobince · Accepted Answer · 2010-04-07 06:55:48Z

What is wrong with me.

Bit harsh on yourself there!

You added the row-removing click event handler to the <p> element. Click events bubble up through their ancestors, so if you click in the <input> element to focus it, its parent <p> also receives a click, and consequently removes the row.

I suggest putting the click event on the ‘remove’ text only. eg.:

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);
});

Though possibly it would be better for accessibility to make both the ‘Add’ and ‘Remove’ actions buttons (either <input type="button"> or <button>), styled not to look like buttons if you don't want them to.

Vivart · Accepted Answer · 2010-04-07 06:54:26Z

try this.

 <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>

Actually you are right.But,this is not actually what i need.Thanks for your response

Taha · Accepted Answer · 2010-04-07 06:57:38Z

0

Use a javascript framework like jquery or prototype. This will make sure your code is cross browser compatible and will also reduce the lines of code.

answered Apr 7, 2010 at 6:57

Taha

1852 silver badges12 bronze badges

Collectives™ on Stack Overflow

dynamically create element using javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related