DOM的添加元素

最新推荐文章于 2024-04-09 23:01:20 发布

lzw995189944

最新推荐文章于 2024-04-09 23:01:20 发布

阅读量2.3k

点赞数

文章标签： html dom操作

本文链接：https://blog.csdn.net/lzw995189944/article/details/121803952

版权

1. 添加一个新元素: 3步

(1). 创建一个新的空元素对象:

a. var 新元素对象=document.createElement("标签名")

创建元素

b. 结果: <元素></元素>

c. 比如: var a=document.createElement("a");

结果: <a></a>

(2). 为新元素添加必要属性: 元素对象.属性名=新值

比如: a.innerHTML="go to tmooc";

a.href="http://tmooc.cn";

结果: <a href=" http://tmooc.cn "> go to tmooc </a>

(3). 必须将新元素添加到DOM树上指定父元素下，浏览器才能显示出新元素: 3种:

a. 在父元素下末尾追加新元素

父元素.appendChild(新元素)

追加孩子

b. 在父元素下插入到一个现有子元素之前

父元素.insertBefore(新元素，现有子元素)

插入到...之前

c. 替换父元素下的一个现有的子元素

父元素.replaceChild(新元素，现有子元素)

(4). 示例: 创建一个a元素和一个文本框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var a=document.createElement("a")
    a.innerHTML="go to tmooc";
    a.href="http://tmooc.cn";
    console.log(a);
    document.body.appendChild(a);

    //再创建一个文本框
    var input=document.createElement("input");
    //input-><input/>
    //将文本框放在a之后?
    document.body.appendChild(input);
    //将文本框放在a之前?
    // document.body.insertBefore(input,a);
    //用文本框替换a?
    // document.body.replaceChild(input ,a);
  </script>
</body>
</html>
运行结果:

2. 优化:

(1). 问题: 只要修改DOM树的内容，几乎都会导致重排重绘。但是，频繁重排重绘，降低页面加载的效率。

(2). 解决: 尽量减少修改DOM树次数，但是，内容不能少！

(3). 2种情况:

a. 如果同时添加父元素和子元素时，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树上。

b. 如果父元素已经在页面上了，要添加多个平级子元素。就要借助于文档片段对象来实现

1). 什么是文档片段对象: 内存中临时保存多个平级子元素的虚拟父元素

2). 如何:

i. 先创建文档片段对象:

var 文档片段对象=document.createDocumentFragment();

创建文档片段

ii. 将子元素先添加到文档片段对象中

文档片段对象.appendChild(子元素)

iii. 将文档片段对象一次性添加到页面上

父元素.appendChild(文档片段对象);

3. 删除元素：父元素.removeChild(子元素)

4. 示例: 动态生成表格

<!DOCTYPE HTML>
<html>

<head>
  <title>动态创建表格</title>
  <meta charset="utf-8" />
  <style>
    table {
      width: 600px;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid #ccc
    }
  </style>

</head>

<body>
  <div id="data">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>薪资</th>
          <th>年龄</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    var json = [
      { "ename": "Tom", "salary": 11000, "age": 25 },
      { "ename": "John", "salary": 13000, "age": 28 },
      { "ename": "Mary", "salary": 12000, "age": 25 }
    ];

    //1. 创建tbody
    var tbody=document.createElement("tbody");
    //2. 遍历json数组中每个员工对象
    for(var emp of json){
      //每遍历一个员工对象就创建一个tr，并将tr添加到tbody中
      var tr=document.createElement("tr");
      tbody.appendChild(tr);
      //3. 遍历当前员工对象中每个属性
      for(var key in emp){
        //每遍历一个属性就创建一个td，并将td添加到tr中
        var td=document.createElement("td");
        tr.appendChild(td);
        //设置当前td的内容为当前员工对象的当前属性的属性值
        td.innerHTML=emp[key];
      }
    }

    //4. 将tbody追加到table中
    //4.1 先查找table
    var table=document.querySelector(
      "#data>table"
    );
    //4.2 将tbody追加到table下
    table.appendChild(tbody);
  </script>
</body>

</html>
运行结果：

<!DOCTYPE HTML>

<html>

<head>

<title>动态创建表格</title>

<style>

table {

width: 600px

最低0.47元/天解锁文章

lzw995189944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的添加元素

1. 添加一个新元素: 3步(1). 创建一个新的空元素对象:a. var 新元素对象=document.createElement("标签名")创建元素b. 结果: <元素></元素>c. 比如: var a=document.createElement("a");结果: <a></a>(2). 为新元素添加必要属性: 元素对象.属性名=新值...
复制链接

扫一扫