Forum Moderators: open
Although it's fast and dirty as far as changes, it's entirely NOT valid, so it's a bad idea...
I created this to test/refine my DOM actions (still learning). Hope you enjoy it/learn if you are an innerhtml freak like I was.
The display of the elements looks the same (the css is the same), however, once you try "textarea" you'll see the difference more clearly. I am thinking of mixing this with "draggables" and resize and position elements absolute... Might be an interesting way to design.
<script type="text/javascript">
//Original Code by Ben Althauser//
function initload(value){
elOpt = document.createElement(value);
elOpt.setAttribute("id","my" + value);
elOpt.style.border = "1px solid #cccccc";
elOpt.style.height = "40px";
elOpt.style.width = "40px";
elOpt.style.margin = "4px";
elOpt.style.display = "inline";
elOpt.text = "hah!";
document.getElementById("bojo").appendChild(elOpt);
}
</script>
<body>
<div id="bojo"></div>
<input onclick="initload(this.value);" type="submit" name="Submit" value="div">
<input onclick="initload(this.value);" type="submit" name="Submit" value="a">
<input onclick="initload(this.value);" type="submit" name="Submit" value="hr">
<input onclick="initload(this.value);" type="submit" name="Submit" value="textarea">
<input onclick="initload(this.value);" type="submit" name="Submit" value="li">
<input onclick="initload(this.value);" type="submit" name="Submit" value="p">
<input onclick="initload(this.value);" type="submit" name="Submit" value="ul">
<input onclick="initload(this.value);" type="submit" name="Submit" value="span">
</body>[edited by: Freeform at 1:26 am (utc) on Mar. 1, 2009]
you may be interested in some modifications to your code...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<style type="text/css">
#bojo {
margin:20px auto;
}#mydiv {
width:100px;
line-height:40px;
margin:4px;
border:1px solid #f00;
background-color:#000;
color:#fff;
text-align:center;
}#mya {
color:#f00;
}
#mya:hover {
color:#00f;
}#myhr {
width:50%;
}#myul {
height:20px;
background-color:#0f0;
}
</style><script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}function init(){
elOpt=null;
inps=document.getElementsByTagName('input');
for(c=0;c<inps.length;c++) {
inps[c].onclick=function() {
initload(this.value);
}
}
}function initload(value){
txt=new Array();
txt['div']='foo';
txt['a']='webmasterworld';
txt['textarea']='welcome to my textarea';
txt['li']='this is a lil li';
txt['p']='welcome to the paragraph';
txt['span']='span';if(elOpt!=null){
document.getElementById('bojo').removeChild(elOpt);
}
elOpt=document.createElement(value);
elOpt.setAttribute('id','my'+value);switch(value) {
case 'div':
elOpt.appendChild(document.createTextNode(txt['div']));
break;case 'a':
elOpt.setAttribute('href','http://www.webmasterworld.com/');
elOpt.appendChild(document.createTextNode(txt['a']));
break;case 'textarea':
elOpt.appendChild(document.createTextNode(txt['textarea']));
break;case 'li':
elOpt.appendChild(document.createTextNode(txt['li']));
break;case 'p':
elOpt.appendChild(document.createTextNode(txt['p']));
break;case 'span':
elOpt.appendChild(document.createTextNode(txt['span']));
break;
}document.getElementById('bojo').appendChild(elOpt);
}
</script>
</head>
<body><div>
<input type="button" value="div">
<input type="button" value="a">
<input type="button" value="hr">
<input type="button" value="textarea">
<input type="button" value="li">
<input type="button" value="p">
<input type="button" value="ul">
<input type="button" value="span">
</div><div id="bojo"></div>
</body>
</html>
