<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script 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('tr');
var elCont = document.createElement('td');
var elCont2 = document.createElement('td');
var elInput = document.createElement('input');
var elInput2 = document.createElement('input');
elInput.type = 'text';
elInput.name = 'campo';
elInput2.name = 'campo2';
elInput2.type = 'text';
elCont.appendChild(elInput);
elCont2.appendChild(elInput2);
el.appendChild(elCont);
el.appendChild(elCont2);
Dom.add(el, 'content');
});
});
</script>
</head>
<body>
<div id="doc">
<input type="button" id="add-element" value="agregar campo" />
<div id="content"></div>
</div>
</body>
</html>
no sé si es la mejor forma de insertar elementos en un documento, agradecería su ayuda....
Modo lineal
