2016.3.11_JS动态创建div和span笔记

Posted 2020-06-21 fieldcatalog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016.3.11_JS动态创建div和span笔记相关的知识，希望对你有一定的参考价值。

1.动态创建div.

<html>
<body>
   <a href="javascript:click();">click here</a>
</body>
</html>
<script language=javascript>
        var divId=1;
        function click()
        {
            var obj=document.createElement("div");
            obj.id="this is div "+divId +",click me";
            divId++;
            obj.style.border="2px solid #CAE1FF";
            obj.style.height="90px";
            obj.style.width="900px";
            obj.style.margin="10px";
            obj.innerHTML=obj.id;

            document.body.appendChild(obj);
            document.getElementById(obj.id).onclick=function(){
                document.body.removeChild(obj);
            };
        }
</script>

2.动态创建span.

<html>
<head>
    <title></title>
    <style type="text/css">
        .dynamicSpan {
            font-size: 25px;
            color: #B22222;
        }
    </style>
    <script type="text/javascript">
        var spanId=1;
        function createSpan() {
            var spanTag = document.createElement("span");
            spanTag.id = spanId;
            spanId++;
            spanTag.className = "dynamicSpan";
            spanTag.innerHTML = " [this is span " +spanTag.id+"]";

            document.body.appendChild(spanTag);
        }
    </script>
</head>
<body>
    <center>
        <input id="btn1" type="button" value="click me" onclick="createSpan();" />
    </center>
    <br />
</body>
</html>

以上是关于2016.3.11_JS动态创建div和span笔记的主要内容，如果未能解决你的问题，请参考以下文章