创建标签元素、createElement、appendChild、createDocumentFragment

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量408 收藏
点赞数
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm_choose_live/article/details/117466044
版权

文章目录

栗子：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    #box div{
      width: 100px;
      height: 100px;
      background: pink;
    }

    #box p {
      width: 100px;
      height: 100px;
      background: cornflowerblue;
    }
  </style>


<body>
<div id="box">
  <div></div>

</div>
</body>

JS操作:

操作1：

<script>
    window.onload = function () {
      const div = box.children[0];

      div.onclick = function () {
        console.log('div'); // 点击div控制台输出 div
      };

      /*box.innerHTML += `<p></p>` // 加上这条语句再点击div 。控制台没输出div*/

      /*document.onclick = function () {
        console.log('document'); // 点击div，输出 div、document*/

      /*box.innerHTML += `<p></p>`
      document.onclick = function () {
        console.log('document');
      }; */// 点击div，只输出 document

      // 上述情况出现的原因
      /*console.log(box.innerHTML); // 输出 div标签

      console.log(typeof box.innerHTML); // string，是字符串，取出的是一串符号*/

    };
  </script>

box.innerHTML += <p></p> 相当于 box.innerHTML = <div></div> + <p></p>
那么 box.innerHtml 是字符串，而不再是标签，
且覆盖了之前的 div标签，那么之前的div标签就不存在了
也就获取不到div标签的点击事件了

操作2：

<script>
    window.onload = function () {

      const div = box.children;

      box.innerHTML += `<p></p>`

      div[0].onclick = function () { 
       // 设置的是修改后的 div 点击事件，上面设置的是 原来的div点击事件
        console.log('div'); 
      };

      document.onclick = function () {
        console.log('document');
      };
    };
    // 输出 div document
  </script>

createElement

在JS 创建一个标签元素，在Element中查看不到
暂存在JS 中，没有在页面上渲染出来

const p = document.createElement('p');

      console.log(p); // 输出p标签，但没在页面上渲染出来

将p标签放到页面上

<script>
    window.onload = function () {

      const p = document.createElement('p');

      p.id = 'p1';
      p.className = 'p2';

      p.onclick = function () {
        alert('p');
      };

      box.appendChild(p); // 把标签放到页面上


    };
  </script>

这样操作的好处是 不会覆盖（删除）掉之前的div

文档片段（createDocumentFragment）

为解决createChild时，多次渲染页面，可创建一个文档片段

<script>
    window.onload = function () {

      const p = document.createElement('p');
      const p1 = document.createElement('p');

      // 创建文档片段
      const domFrag = document.createDocumentFragment();


      p.id = 'p1';
      p.className = 'p2';

      p.onclick = function () {
        alert('p');
      };


      domFrag.appendChild(p);
      domFrag.appendChild(p1);

      box.appendChild(domFrag);


    };
  </script>

appendChild

在末尾添加
在原生JS中
没有在最前和特定位置添加的方法

梁什么鸭，
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
createElement与createDocumentFragment的点点区别小结
09-05
考虑以下示例，对比使用`createElement`和`createDocumentFragment`创建多个`<p>`元素的效率： ```javascript // 使用createElement for (var i = 0; i ; i++) { var op = document.createElement("P"); var oText...
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
10-29
### JavaScript性能优化之创建文档碎片(document.createDocumentFragment) 在探讨`document.createDocumentFragment()`方法之前，我们首先需要理解浏览器在处理DOM（文档对象模型）节点插入时的基本行为。DOM是HTML...
createElement与createDocumentFragment的点点区别
源辰_付鹏程
01-02 891
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。 网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： var arrText=["1","2","3","4","5","6",&q
createDocumentFragment()用法总结
码飞_CC的博客
02-15 2947
createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。 DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是...
createElement和createDocumentFragment区别
MorningDuGe
07-27 8486
用法举例createElementvar createElementEg = document.createELement('div'); // 添加元素方法1：innerHTML createElementEg .innerHTML = '<span>this is createELement eg</span>'; var ele = document.getElementById('test'
createElement与createDocumentFragment的区别
u010403387的专栏
04-22 1326
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。 网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： var arrText=["1","2","3","4","5","6","7","
了解createElement 和 createDocumentFragment
weixin_30693683的博客
03-08 149
1、innerHTML 的区别 通过createElement创建的元素，可以访问到它的innerHTML，而通过createDocumnetFragment 创建的元素，访问 innerHTML 会返回underfined。 上代码： var inner = document.createElement("span"); inner.innerHTML = "内部"; var ...
createElement与createDocumentFragment的一些小区别
weixin_34010566的博客
12-21 71
在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。 网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： var arrText=["1","2","3","4","5","6","7",...
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1188
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
对已存在的标签元素添加子元素
看开了
05-09 3171
1.替换原有元素 使用document.createElement(“标签名”); 创建与父标签同类型的标签 使用元素.appendChild(元素名),为替换的元素增加子元素 使用父元素.parentNode.replaceChilde(替换的元素,父元素) 2.使用文档片段 使用document.createDocumentFragment(); 子元素步骤同上 直接父元素.appendChi...
document节点创建页面元素
不甜呐的博客
05-21 3315
1.createElement()方法 描述：本方法用来在内存中创建一个页面元素 语法：var 变量名 = document.createElement("标签名"); 注意：本方法创建的页面元素并不会直接显示在页面中，而是默认存在于内存中 兼容性：五大主流浏览器都支持 2.createTextNode()方法 描述：本方法可创建文本节点 语法：var 变量名 = document.createTextNode(text); 兼容性：五大主流浏览器都...
关于javascript document.createDocumentFragment()
10-30
这段代码在循环中创建并添加了10个列表项，每次`appendChild`都会触发页面重绘。优化后的代码如下： ```javascript var oui = document.getElementById("oItem"); var oFragment = document.createDocumentFragment...
JS中appendChild追加子节点无效的解决方法
10-17
在JavaScript中，`appendChild`方法是用于向元素的子节点列表末尾添加一个新的子节点。然而，在某些情况下，我们可能会遇到`appendChild`追加子节点无效的问题。这个问题通常与DOM操作的规则有关，特别是当尝试将一...
本地存储（localStorage）
梁什么鸭“的博客
06-19 4648
只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage； 存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage，但其区别在于： 存储在 localStorage 的数据可以长期保留； 而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。 cookie也用来存储数据，但是cookie不适合存储太多数据 因为cookie有个特性：每次请求后台的时候，cookie所有的
cookie
梁什么鸭“的博客
06-17 2246
什么是cookie? 一个正常的项目需要前台和后端，后端给前端提供服务，前端利用后端提供的服务跟用户进行交互这就涉及到关于数据的传输，数据传输涉及到HTTP协议 HTTP是无状态的，用户在每次访问的时候对于HTTP而言都是一次全新的访问，压根不会保留当前用户之前或者说上一次访问的访问状态 但是我们往往需要记录历史访问状态， 比如： 保存登录状态，当登录了账号后，下次访问就是已登录状态，那么就用到了cookie 打开百度搜索页面，F12打开控制台，点击Network： 由于cookie每次都会发送到后台，那
关于 Javascript 算法
梁什么鸭“的博客
04-26 1490
Javascript 算法
LeetCode 22：括号生成 （JavaScript 解答）
梁什么鸭“的博客
04-27 1279
括号生成
Proxy
梁什么鸭“的博客
05-30 838
用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种 “元编程”，即对编程语言进行编程 Proxy 可理解成，在目标对象之前架设一层 “拦截” ，外界对该对象的访问，都必须先通过这层拦截，因此提供了一些机制，可对外界的访问进行过滤和改写。Proxy 原意是 “代理”，用在这表示由它来 “代理” 某些操作，可译为 “代理器”。 let o = { a: 1, b: 2 } let obj = new Proxy(o, { // target -
createdocumentfragment循环生成html
05-24
`createDocumentFragment()` 方法可以用来创建一个文档片段。文档片段可以包含文档中的任意节点，但是它不是真正的DOM树的一部分。因此，将节点添加到文档片段中相当于将它们从文档树中删除，这样可以减少DOM操作的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁什么鸭，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值