标签：
js中有时候需要动态的创建代码，这也是常规的基础知识，再次我总结一下，以备后用！
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script>
//动态添加一个标签
function add(){
var map = document.getElementById("planetmap");
var x=180;
var y=139;
var arr=new Array();
arr[0]=x;
arr[1]=y;
arr[2]=14;
var obj = document.createElement("area");
obj.shape="circle";
<!--obj.coords="180,139,14";-->
obj.coords=arr;
target ="_self";
obj.alt="May";
obj.href="https://www.baidu.com";
map.appendChild(obj);
console.log(arr);
}
//显示相关的信息
function show(){
var i=1;
var pot = document.getElementById(i);
console.log(pot.shape+"-----"+pot.coords+"----"+pot.alt);
}
//动态添加超链接1
function create1(){
var a=document.createElement("a");
a.id="1";
a.href="https://www.baidu.com";
a.title="我是百度超链接";
a.text="百度一下";
document.getElementById("div").appendChild(a);
}
//动态添加超链接2
function create2(){
document.getElementById("div").innerHTML = "<a id=1 href=https://www.baidu.com title=baidu>百度一下</a>";
}
</script>
</head>
<body id="content">
<p>请点击图像上的星球，把它们放大。</p>
<button id="btn" onclick="add()">动态添加area标签</button>
<button id="btn_show" onclick="show()">显示area1的信息</button>
<button id="btn_add1" onclick="create1()">添加超链接1</button>
<button id="btn_add2" onclick="create2()">添加超链接2</button>
<img
src="eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets"/>
<map name="planetmap" id="planetmap">
<area id="1"
shape="circle"
coords="129,161,10"
target="_blank"
alt="Mercury"/>
<!--<area id="2" ,-->
<!--shape="circle"-->
<!--coords="180,139,14"-->
<!--href="https://www.baidu.com"-->
<!--target="_blank"-->
<!--alt="Sun"/>-->
</map>
<div id="div" style="height:20%">
</div>
</body>
</html>
显示与测试效果如下：
原理：1.首先获取一个父容器（存在，并且可以显示，有宽高属性）
2.添加一个标签，并设置属性
3.容器添加子标签。
不妥之处，欢迎批评指正，共同学习，共同进步！
标签：
原文地址：http://blog.csdn.net/abc__d/article/details/51351648
