下面以动态创建 jiathis 分享组件来说明一下如何利用 js 动态创建 html 元素。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js动态创建html内容</title>
</head>
<body>
<div id="jiathis_style_32x32"></div>
<script language="javascript">
var jiathis_element=new Array(
new Array(
'分享到QQ空间',
'jiathis_button_qzone'
,
new Array(
'分享到新浪微博',
'jiathis_button_tsina'
,
new Array(
'分享到腾讯微博',
'jiathis_button_tqq'
,
new Array(
'分享到人人网',
'jiathis_button_renren'
,
new Array(
'分享到开心网',
'jiathis_button_kaixin001'
,
new Array(
'分享到朋友网',
'jiathis_button_xiaoyou'
,
new Array(
'分享到一键分享',
'jiathis_button_ishare'
,
new Array(
'分享到网易微博',
'jiathis_button_t163'
,
new Array(
'分享到百度搜藏',
'jiathis_button_baidu'
,
new Array(
'打印文章',
'jiathis_button_print'
,
new Array(
'添加到收藏夹',
'jiathis_button_fav'
,
new Array(
'分享到各大网站',
'jiathis jiathis_txt jtico jtico_jiathis',
'http://www.jiathis.com/share',
'_blank'
,
new Array(
'分享次数',
'jiathis_counter_style'
;
var testdiv=document.getElementById('jiathis_style_32x32';
for(var i=0;i<jiathis_element.length;i++{
var para=document.createElement('a';
para.setAttribute('rel','nofollow';
para.setAttribute('title',jiathis_element[i][0];
para.setAttribute('class',jiathis_element[i][1];
if('undefined'!=typeof(jiathis_element[i][2] para.setAttribute('href',jiathis_element[i][3];
if('undefined'!=typeof(jiathis_element[i][3] para.setAttribute('target',jiathis_element[i][4];
testdiv.appendChild(para;
}
</script>
<script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>
</body>
</html>