下面以动态创建 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>