元素的创建以及只创建一个-CSDN博客

元素创建的三种方式

为了提高用户的体验

1. document.write("标签的代码以及内容");

　　页面加载的时候创建,是没有问题的：document.write("<p>这是一个p</p>");

　　缺陷：如果在页面加载完毕后，通过这种方法创建，页面上存在的所有内容都没有了　

my$("btn").οnclick=function(){

　　　　document.write("<p>这是一个p</p>");

　　};

2. 父级对象.innerHTML("标签的代码以及内容");

  my$("btn").οnclick=function () {
    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };

3. document.createElement("标签的名字");

第一步：document.createElement("标签的名字");

第二步：追加：父级元素.appendChild(子级元素对象);

　　　　插入：父级元素.inerstBefore(新的子级对象,参照的子级对象);

　　　　移除：父级元素.removeChild(要干掉的子级元素对象);

//点击按钮,在div中创建一个p
  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };

第3种方法会连续的创建元素，解决方法：有则删除,无则创建

只创建一个元素，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
        <input type="button" value="显示效果" id="btn" />
        <div id="dv"></div>
        <script src="common.js"></script>
        <script>
            //有则删除,无则创建
            
            //方法一:缺点:不停的在创建和删除
            // my$("btn").onclick = function() {
            //     if (my$("btn2")) {//如果存在就删除
            //         my$("dv").removeChild(my$("btn2"));
            //     }//进行创建
            //     var inObj = document.createElement("input");
            //     inObj.type = "button";
            //     inObj.value = "我是被创建的按钮";
            //     inObj.id = "btn2";
            //     my$("dv").appendChild(inObj);
            // };
            
            //方法二:只创建一次
            my$("btn").onclick=function(){
                if(!my$("btn2")){//如果没有,则创建;如果有就不执行——只创建一次
                    var inObj = document.createElement("input");
                        inObj.type = "button";
                        inObj.value = "我是被创建的按钮";
                        inObj.id = "btn2";
                        my$("dv").appendChild(inObj);
                }
            };
        </script>
    </body>
</html>