js动态创建dom元素示例

最新推荐文章于 2022-10-06 15:11:43 发布

ylxb

最新推荐文章于 2022-10-06 15:11:43 发布

阅读量3k

点赞数 1

分类专栏： Web前端文章标签： dom javascript html5

本文链接：https://blog.csdn.net/abc__d/article/details/51351648

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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" οnclick="add()">动态添加area标签</button>
<button id="btn_show" οnclick="show()">显示area1的信息</button>
<button id="btn_add1" οnclick="create1()">添加超链接1</button>
<button id="btn_add2" οnclick="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.容器添加子标签。

不妥之处，欢迎批评指正，共同学习，共同进步！

ylxb

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js动态创建dom元素示例

js中有时候需要动态的创建代码，这也是常规的基础知识，再次我总结一下，以备后用！直接上代码： //动态添加一个标签 function add(){ var map = document.getElementById("planetmap"); var x=180;
复制链接

扫一扫