6赞

什么是更好的,通过DOM函数追加新元素,或附加HTML标签的字符串？

作者：sx-March23 | 2023-07-13 14:53

如何解决《什么是更好的,通过DOM函数追加新元素,或附加HTML标签的字符串？》经验，为你挑选了2个好方法。

我已经看到了一些向DOM添加元素的不同方法.例如,最普遍的似乎也是

document.getElementById('foo').innerHTML ='Here is a brand new paragraph!';

要么

newElement = document.createElement('p');
elementText = document.createTextNode('Here is a brand new parahraph!');
newElement.appendChild(elementText);
document.getElementById('foo').appendChild(newElement);

但我不确定做任何一个的好处.是否有一个经验法则,关于什么时候应该完成另一个,或者其中一个是否完全错了？

1> Wayne Burket..：

一些说明:

innerHTML在IE中使用速度更快,但在chrome + firefox中使用速度更慢.这是一个基准测试,显示了一组不断变化的

s +

s; 这是一个基准,显示了这个常数,简单

另一方面,DOM方法是传统标准 - innerHTML在HTML5中标准化 - 并允许您保留对新创建元素的引用,以便您以后可以修改它们.

因为innerHTML快速(足够),简洁且易于使用,所以在任何情况下都倾向于使用它.但请注意,使用从文档中innerHTML分离所有现有DOM节点.以下是您可以在此页面上测试的示例.

首先,让我们创建一个函数,让我们测试节点是否在页面上:

function contains(parent, descendant) {
    return Boolean(parent.compareDocumentPosition(descendant) & 16);
}

true如果parent包含,则返回descendant.像这样测试:

var p = document.getElementById("portalLink")
console.log(contains(document, p)); // true
document.body.innerHTML += "It's clobberin' time!";
console.log(contains(document, p)); // false
p = document.getElementById("portalLink")
console.log(contains(document, p)); // true

这将打印:

true
false
true

它可能看起来不像我们的使用innerHTML应该影响我们对portalLink元素的引用,但确实如此.需要再次检索才能正常使用.

2> Jon..：

有许多不同之处:

innerHTML仅由W3C标准化为HTML 5; 虽然它现在已成为所有流行浏览器的事实上的标准,但从技术上来说,它是HTML 4中的供应商扩展,标准粘贴的开发人员永远不会被捕获.另一方面,所有浏览器都支持它更加方便和实用.

innerHTML 替换元素的当前内容(它不允许您修改它).但同样,如果你不介意这个限制,你会获得方便.

innerHTML 已被测量为更快(不可否认,该测试涉及今天未广泛使用的旧版浏览器).

innerHTML如果设置为用户提供的尚未正确编码的值(例如el.innerHTML = '



    
        
            
            
                
                    
                
            

            
                sx-March23            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1来自Ajax源的DataTables按数据顺序和显示格式化日期
                
                                
                    2选择单元格时,UICollectionView会滚动
                
                                
                    3在Windows上运行Kafka时出错
                
                                
                    4为什么mt19937 m(random_device()())无法编译？
                
                                
                    5为什么0.29999999999999998转换为0.3？
                
                                
                    6数组[Any]和contains()
                
                                
                    7方法链接时，try-with-resources中的“资源永不关闭”
                
                                
                    8检测每个触摸事件而不获取应用程序上下文？
                
                                
                    9android中的back press和home按钮之间的区别
                
                                
                    10如果我没有使用刀片或任何模板,如何使用href标签重定向到laravel 5中的路由？
                
                                
                    11在处理NaN时,data.table"list"与":="
                
                                
                    12通过FFT执行2D卷积时的奇怪行为
                
                                
                    13输入内部的响应式图标
                
                                
                    14新标签中的HTML按钮打开链接
                
                                
                    15C3中的换行符通过JavaScript生成SVG图表
                
                                
                    16Laravel 5.1使用限制在()方法中的雄辩
                
                                
                    17如何将Pandas列多索引名称作为列表
                
                                
                    18Redux React从API创建初始状态
                
                                
                    19Laravel雄辩的模型如何从关系表中获取数据
                
                                
                    20并行检查md5文件

    






    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有