创建元素的三种方式

最新推荐文章于 2022-04-22 22:03:35 发布

madao丫

最新推荐文章于 2022-04-22 22:03:35 发布

阅读量1.9k

点赞数 2

分类专栏： JS学习

JS学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

document.write()

document.write('新设置的内容<p>标签也可以生成</p>')

缺陷：如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能问题：

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

几个案例：

1.document.write()方法创建对象

<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩
<script src="common.js"></script>
<script>
  //document.write("标签代码及内容");
  document.getelementById("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉


</script>
</body>

2.innerHTML方式创建对象

<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击按钮,在div中创建一个p标签
  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";

  document.getelementById("btn").onclick=function () {
    document.getelementById("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
  };
</script>
</body>

3.document.createElement()方式创建对象

<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
    if(typeof element.textContent=="undefined"){
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}
  //第三种方式创建元素
  //创建元素
  //document.createElement("标签名字");对象
  //把元素追加到父级元素中
  //点击按钮,在div中创建一个p

  document.getelementById("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    document.getElementById("dv").appendChild(pObj);
  };


</script>
</body>

4.动态创建列表

<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  document.getElementById("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    document.getElementById("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>
</body>

5.点击按钮创建表格

<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"优酷",href:"http://www.youku.com"},
    {name:"土豆",href:"http://www.tudou.com"},
    {name:"快播",href:"http://www.kuaibo.com"},
    {name:"爱奇艺",href:"http://www.aiqiyi.com"}
  ];

  //点击按钮创建表格
  document.getElementById("btn").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    document.getElementById("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
      var dt=arr[i];//每个对象
      var trObj=document.createElement("tr");
      tableObj.appendChild(trObj);
      //创建第一个列,然后加入到行中
      var td1=document.createElement("td");
      td1.innerText=dt.name;
      trObj.appendChild(td1);
      //创建第二个列
      var td2=document.createElement("td");
      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
      trObj.appendChild(td2);
    }
  };

</script>
</body>

6.只创建一个元素

<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //有则删除,无则创建


//先判断有没有,有就删除,然后再创建
//  document.getElementById("btn").onclick=function () {
//    //判断,div中有没有这个按钮,有就删除
//    //判断这个按钮的子元素是否存在
//    if(my$("btn2")){//如果为true就有
//      document.getElementById("dv").removeChild(my$("btn2"));
//    }
//    var obj=document.createElement("input");
//    obj.type="button";
//    obj.value="按钮";
//    obj.id="btn2";
//    document.getElementById("dv").appendChild(obj);
//  };


  document.getElementById("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!document.getElementById("btn2")){//如果为true就有
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      document.getElementById("dv").appendChild(obj);
    }

  };


</script>
</body>

<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>

  var i=0;
  document.getElementById("btn").onclick=function () {
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //document.getElementById("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    document.getElementById("dv").insertBefore(obj,my$("dv").firstElementChild);
    //document.getElementById("dv").replaceChild();
  };

  document.getElementById("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    document.getElementById("dv").removeChild(my$("dv").firstElementChild);
  };

  document.getElementById("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(document.getElementById("dv").firstElementChild){
      document.getElementById("dv").removeChild(my$("dv").firstElementChild);
    }

  };
</script>
</body>

madao丫

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
创建元素的三种方式

document.write()document.write('新设置的内容&lt;p&gt;标签也可以生成&lt;/p&gt;')缺陷：如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉innerHTMLvar box = document.getElementById('box');box.innerHTML = '新内容&lt;p&gt;新标签...
复制链接

扫一扫