使用append()后出现重复内容问题——如何用JS/jQuery重建innerHTML？

你有三个嵌套的HTML div元素，要求每个元素仅显示单一数据，但调用init_layout和update_layout后，使用append()的元素出现了重复内容。问题核心在于append()的行为是追加内容而非替换，而你需要的是覆盖原有内容来更新数据，同时保留HTML树结构。

原代码问题分析 #

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" CONTENT="pl" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head><body>         
<div id="main"><div id="title"><div id="content"></div></div></div>

<script>       
function init() 
    {                
    var maindata = "Background";    
    var titledata =  "Some title";        
    var contentdata =  "Some content";
    
    init_layout();
    update_layout();
        
    function update_layout()
        {            
        // HOW TO UPDATE DATA??? - MEANING: 
        // DELETE, INIT NEW DATA WITH SAVE HTML TREE STRUCTURE?            
                    
        // IF I TRY REFRESH DATA LIKE THIS BELOW, 
        // innerHTML will refresh, 
        // BUT also will contain duplicate in any element 
        // where append() was used
        jQuery('#content').html(contentdata);        
        jQuery('#title').append(titledata);
        jQuery('#main').append(maindata);        
        }
    
    function init_layout()
        {                                                         
        jQuery('#content').html(contentdata);        
        jQuery('#title').append(titledata);
        jQuery('#main').append(maindata);        
        }                                                      
    }                   
jQuery(document).ready(init);
</script></body></html>

• jQuery('#content').html(contentdata)是正确的，因为html()会替换元素内的所有内容，不会重复
• jQuery('#title').append(titledata)和jQuery('#main').append(maindata)会重复追加，因为每次调用都会在原有内容后加新文本
• 直接给#title或#main用html()会覆盖掉它们内部的子div（比如#content或#title），破坏HTML结构

解决方案 #

需要给每个需要显示文本的父div添加一个独立的文本容器，这样更新时只操作这个容器，既替换内容避免重复，又不影响嵌套的子元素。

修改后的完整代码

<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" CONTENT="pl" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head><body>         
<!-- 给每个父div添加专门的文本容器，避免覆盖子元素 -->
<div id="main">
  <span class="main-text"></span>
  <div id="title">
    <span class="title-text"></span>
    <div id="content"></div>
  </div>
</div>

<script>       
function init() 
{                
    var maindata = "Background";    
    var titledata =  "Some title";        
    var contentdata =  "Some content";
    
    init_layout();
    update_layout();
        
    function update_layout()
    {            
        // 统一用html()替换内容，避免重复
        jQuery('#content').html(contentdata);        
        jQuery('.title-text').html(titledata);
        jQuery('.main-text').html(maindata);        
    }
    
    function init_layout()
    {                                                         
        jQuery('#content').html(contentdata);        
        jQuery('.title-text').html(titledata);
        jQuery('.main-text').html(maindata);        
    }                                                      
}                   
jQuery(document).ready(init);
</script></body></html>

关键修改点 #

• HTML结构优化：给#main添加<span class="main-text"></span>，给#title添加<span class="title-text"></span>，专门用来存放对应文本，和子div分离
• JS逻辑调整：把原来的append()全部替换为html()，操作新增的文本容器，这样每次调用都会替换原有内容，不会出现重复
• 保留HTML结构：子div（#content、#title）不受文本更新影响，完全保留原有的嵌套结构

这样无论调用多少次update_layout，每个元素都会只显示最新的单一数据，不会出现重复内容。

内容的提问来源于stack exchange，提问作者J L