innerHTML,createElement

最新推荐文章于 2022-11-10 09:56:02 发布
最新推荐文章于 2022-11-10 09:56:02 发布
阅读量55 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/milk/archive/2012/04/13/2445734.html
版权

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>豪情</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
    <input type="button" value="test-01" οnclick="test1()" /><input type="text" name="" readonly="readonly" id="t1" /><br />
    <input type="button" value="test-02" οnclick="test2()" /><input type="text" name="" readonly="readonly" id="t2" /><br />
    <input type="button" value="清空" οnclick="clearVal()" />
    <div id="div1">this is div1</div>
    <div id="div2">this is div2</div>
    <script type="text/javascript">
        var d = new Date().getTime(), buf = [],
            div1 = document.getElementById('div1'),
            div2 = document.getElementById('div2'),
            t1 = document.getElementById('t1'),
            t2 = document.getElementById('t2');
        function test1(){
            for(var i=0; i<1000; i++){
                buf.push('<div><a href="#">测试');
                buf.push(i);
                buf.push('</a></div>');
            }
            div1.innerHTML = buf.join('');
            t1.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';
        }
        function test2(){
            for(var i=0; i<1000; i++){
                var a = document.createElement('a');
                var div = document.createElement('div');
                a.href = '#';
                a.innerHTML = '测试';
                div.appendChild(a);
                div2.appendChild(div);
            }
            t2.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';
        }
        function clearVal(){
            div1.innerHTML = '';
            div2.innerHTML = '';
            t1.value = '';
            t2.value = '';
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/milk/archive/2012/04/13/2445734.html

weixin_30498921
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
innerHTML 与 createElement() 的效率比较
GoodLuck_wu5的博客
04-28 504
element.innerHTML 和 document.createElement() 都可以创建元素。 1、element.innerHTML 创建多个元素有两种方式： ①拼接字符串的方式： var inner = document.querySelector('.inner'); for (var i = 0; i <= 100; i++) { inner.innerHTML += ...
Javascript createElement和innerHTML增加页面元素的性能对比
10-29
在JavaScript中，向页面动态添加元素时，通常有两种常见方法：`createElement`和`innerHTML`。这两个方法各有优缺点，性能表现也有所差异。本文将详细分析这两种方法，并通过示例代码进行对比。 1. `createElement`...
innerHTML vs createElement
weixin_34319999的博客
01-21 175
WilsonLiu's blog 首发地址两者生成dom的方式有什么优劣呢？首先让我们看一个小问题再引入正题～ 如何重复插入一个相同的html结构呢？ //错误的 window.onload = function(){ var el = document.createElement('div'); el.appendChild(docum...
JavaScript基础学习 创建元素innerHTML和createElement
柠檬味小发糕的博客
12-18 532
JavaScript基础学习 创建元素innerHTML和createElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible
JS中 innerHTML和createElement的区别
shane的博客
03-03 860
在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大 1. innerHTML字符串拼接方式 function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) { document.body.innerHTML += '<div style="width:100px; height
JavaScript innerHTML和createElement效率对比
火星基地
10-24 442
前言： 在DOM节点操作中，innerHTML和createElement都可以实现创建元素。它们实现的功能类似，但是效率却相差很大。本文分别统计用innerHTML字符串拼接方式、innerHTML数组方式和createElement方式创建1000次元素的时间，来比较它们之间效率的高低。 比较思路： 使用new调用创建日期对象 完成1000次创建相同元素后的时间，减去创建之前的时间，即为过程所用的时间（单位：ms） 比较三种方式所用的时间 比较过程： 1. innerHTML字符串拼接方式 代码：
document.createElement()用法
09-05
newNode.innerHTML = "This is a test!"; oTest.insertBefore(newNode, document.getElementById("x1")); ``` 这段代码将在ID为"x1"的`<p>`元素之前插入一个新的`<p>`元素，内容为"This is a test!"。 总的来说，`...
innerHTML应用
09-28
blank的blog：http://www.planabc.net/innerHTML 属性的使用非常流行，...另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有
IE中createElement需要注意的一个问题
09-05
本篇文章将详细探讨一个与`createElement`方法有关的问题，这个问题主要体现在IE6和IE7这两个版本中。 `createElement`是JavaScript中的一个DOM操作方法，用于在当前文档中创建一个新的HTML元素。通常，我们可以...
innerHTML和createElement的效率问题
lxllxl211的博客
11-10 226
3.innerHTML创建多个元素效率更高（不要采取拼接字符串，采取数组形式拼接）4.createElement（）创建多个元素效率稍微低一点点，但是结构清晰。1.如果页面流加载完毕，再调用document.write会导致页面重绘。2.innerHTNML是将内容写到某个DOM中，不会导致页面全部重绘。
JavaScript性能优化--创建表格
02-18 807
JavaScript创建表格的方法很多。     方法1：     可以使用createElement方法来创建table，tbody，tr，td，然后使用createTextNode创建文本，最后使用appendChild来添加元素。     http://cssrain.cn/demo/cccreatetable/demo1.html     方法2： 也可以使用HTML专门的创建表
初学js---动态生成表格
banshenjian0454的博客
07-30 293
动态生成表格并封装函数： 1.动态创建表头 　　*通过createElement('table')创建一个表格标签——>通过createElement('thead')创建表头——>通过table.appendChild(thead')将表头包含到表格中; 　　　　**同样的方法创建tr并将tr放到thead中 　　　　　　***再将表头数据依次放到表头：通过 ...
三种生成表格的方式
qq_41401555的博客
05-07 418
1.   innerHTML// 获取操作的标签元素 var div1=  document.getElementById("div1");     div1.innerHTML = "&lt;table border='1'&gt;&lt;tr&gt;&lt;td&gt;性别&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;select&am
在js中使用createElement创建HTML对象和元素
weixin_30797027的博客
08-03 62
1.创建链接 <script language="javascript"> var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerHTML = text; a.s...
根据excel列动态创建mysql表,JavaScript如何动态创建table表格
weixin_35637837的博客
03-27 207
两种JavaScript动态创建table表格的方法，分享给大家，具体实现如下方法一：最原始的方法，创建一一元素var a1=document.createElement("table");var a2=document.createElement("tbody");var a3=document.createElement("tr");var a4=document.createElement(...
制作一个表格，显示班级的学生信息
awan8718的博客
02-27 475
制作一个表格，显示班级的学生信息 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 任务 第一步： 首先，我们创建删除函数，并...
JS中使用innerHTML和createElement方式动态创建元素
weixin_33743703的博客
06-18 2625
方式一：使用innerHTML拼接字符串方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
createElement() 创建元素 appendChild()添加元素
weixin_30591551的博客
09-05 536
Javascript window 对象的document.createElement() 方法、语法及其使用。 1、方法 创建一个新的html元素对象，并可返回一个Element 对象，新创建的Element 对象，具有指定的标签名。 2、语法 以下为引用内容： createElement(name) 3、使用 1、创建超链接 以下为引用内容： <html> &l...
在html语言中建立2个表格,dom操作表格示例(dom创建表格)
weixin_39617484的博客
06-01 605
一、使用HTML标签创建表格：复制代码代码如下:人员表姓名性别年龄张三男20李四女22合计：Nthead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个二、使用DOM创建表格标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTMLDOM来操作它。(HTMLDOM提供了更加方便快捷的方式来操作HTML)复制代码代码如...
createElement参数
最新发布
08-15
例如，可以通过设置元素的className属性来为元素指定CSS样式，也可以通过设置innerHTML属性来为元素添加文本内容或HTML标签。 创建的元素默认是不会显示在页面上的，需要将其添加到页面中的某个位置才能实际显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值