09/10
2014
<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来处理。
