09/10
2014
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div id="a" style="background:#DAE0F1;"> <p id="b">bbbbbbbbbbbbbbbbb</p></div><script type="text/javascript"> function createE (tagName,id,className,style,innerHTML,addway,parentId,reforeId) { var newElement=document.createElement(tagName); newElement.id=id; newElement.className=className; newElement.style.cssText=style; newElement.innerHTML=innerHTML; if (addway=='end') { if (parentId=='body') { document.body.appendChild(newElement); }else{ document.getElementById(parentId).appendChild(newElement); } } if(addway=='before'){ if (parentId=='body') { document.body.insertBefore(newElement,document.getElementById(reforeId)); }else{ document.getElementById(parentId).insertBefore(newElement,document.getElementById(reforeId)); } } } createE('div','aa','link','font-size: 30px;','追加在a的末尾','end','a',''); createE('h1','','','font-size: 30px;','插入在a中的b之前','before','a','b'); createE('h1','c','','font-size: 30px;','追加在body末尾','end','body',''); createE('h1','d','','font-size: 30px;','插入在body中的a之前','before','body','a');</script> |
输出如下：
今天写了个使用js创建页面元素的函数，如果有多个元素需要使用js来创建的话，倒还是可以方便一些的。函数参数如下：
元素的标签名,元素的id,元素的class名,元素的内部样式,元素的内部代码,追加方式（填写“end”或者“before”）,追加到的父元素的id,父元素中子元素的id（仅当追加方式为before时填写）。
如果追加方式为end，则使用appendChild()方法追加到父元素内；如果追加方式为before，则使用insertBefore()方法插入到父元素内某个子元素之前。
考虑到body是创建元素时常用的一个节点，如果把父元素的id填写为“body”则会按body来处理。
