📌  相关文章
📜  如何使用 JavaScript 组合多个元素并将结果附加到 div 中?

📅  最后修改于: 2021-11-08 06:19:48             🧑  作者: Mango

组合多个元素并将元素附加到 DOM 是一个至关重要的过程,它将成为一个耗时的过程。如果处理不当,作为开发人员,我们应该知道如何有效地更新 DOM。因此,以下是将 HTML 元素附加到 DOM 的三种方法。以下方法按时间复杂度降序排列。

  • 使用 jQuery 的 append 方法。
  • 使用字符串而不是节点附加元素。
  • 使用纯 JavaScript 来创建和附加节点。

对于本指南,我们假设我们的任务是将 10 个列表项附加到网页正文中。

方法一:这种方法使用jQuery append() 方法来放置要插入的DOM 元素。

  • 例子:
    
    
      
    
        
            Appending new elements to document body .
        
        
        
    
      
    
        
        
            
                  
    • JavaScript
    •         
        
              
  • 输出:

方法 2:使用字符串而不是节点来附加元素。声明一个空的 JavaScript字符串以在该字符串存储 HTML 元素。不断向字符串添加新元素。使用 jQuery 的append() 方法将该字符串附加到文档或一些已经存在的 DOM 节点。

  • 例子:
    
    
      
    
        
            Appending new elements to document body .
        
        
        
    
      
    
        
        
            
                  
    • JavaScript
    •         
        
         
  • 输出:

方法 3:使用纯 JavaScript 附加元素。使用document.createElement() 方法和 Argument 中元素的标签名称。在元素的属性中设置值。这里是设置列表元素的innerHTML 属性。使用 appendChild 方法将新创建的元素附加到片段中。将片段附加到 DOM 的主体或某些已经存在的 DOM 节点。

  • 例子:
    
    
      
    
        
            Appending new elements to document body .
        
        
        
    
      
    
        
        
            
                  
    • JavaScript
    •         
        
           
  • 输出: