appendChild append innerHTML createElement createTextNode分析
appendChild append innerHTML createElement createTextNode分析
小狼狗007 发表于1年前
appendChild append innerHTML createElement createTextNode分析
  • 发表于 1年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

1.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。(属于dom对象),也可以插入Html对象 例子: Firstname Lastname 输出 FirstnameLastname 2.append函数(JQuery)-一般函数都是JQuery中的 有下面一段html代码:

Greetings

Hello
Goodbye
然后通过一行代码可以得到下面的代码: $('.inner').append('

Test

');//在class="inner“内部添加p //下面是得到的结果:

Greetings

Hello

Test

Goodbye

Test

还可以把一个元素添加到另一个元素下面: $('.container').append($('h2')); //把h2添加到class="container” //下面是结果:
Hello
Goodbye

Greetings

3.createTextNode为创建文本节点,createElement为创建一个元素标签,appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。通常这3者都会在一起使用,在body中添加新的元素 例子:var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element); 如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。 4.appendHtml和innerHTML用法差不多,区别如下: (1)在执行速度的比较上,使用appendChild比innerHTML要快,特别是内容包括html标记时,appendChild明显要快于innerHTML,这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上,当包含html标记过多时,innerHTML速度会明显变慢。 (2)如果appendChild的参数是页面存在的一个元素,则执行后原来的元素会被移除,如document.getElement("a").appendChild(document.getElementByIdx("b")),执行后,b元素会先被移除,然后再添加到a中。 (3)通过appendChild添加到的是dom对象,返回的也是dom对象,可以通过dom对象访问获取元素的各种属性,而innerHTML则是纯字符串,不能获取内部元素的属性。这也是执行速度差异的主要原因 (4)、在使用上innerHTML比appendChild要方便,特别是创建的节点属性多,同时还包含文本的时候。 因此在使用时如果数据量较大且对性能有所要求时,还是应该使用appendChild。
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 7
码字总数 2214
×
小狼狗007
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: