使用createElement()切换用户帖子时旧内容未清除问题求助

问题描述 #

开发加载用户帖子功能时，点击User div可加载对应用户的帖子，但切换到其他用户时，旧用户的帖子未自动删除，新用户的帖子显示在旧帖子下方，需要实现删除旧帖子后，在同一个div中加载新帖子。

错误原因分析 #

1. remove函数逻辑错误：判断条件使用if (element > 0)，element是DOM元素对象，永远会被判定为true，且每次仅删除一个子元素，无法彻底清空容器；同时调用时机错误，在新增帖子后才删除，导致新帖被误删。
2. 帖子内容赋值错误：使用document.querySelector(".postHead")全局选择元素，会修改页面中第一个匹配的元素，而非新创建的帖子元素，导致所有帖子内容重复。
3. 加载顺序错误：先添加新帖子再尝试删除旧帖子，逻辑顺序颠倒，无法实现清空旧内容的效果。

修正方案及代码 #

1. 修改getPost函数 #

在获取新帖子前先清空旧内容，同时修改内容赋值逻辑，从新创建的帖子元素内部获取目标节点：

function getPost(userID){
  fetch('https://jsonplaceholder.typicode.com/posts?userId='+ userID)
  .then((response) =>{
    if (response.ok) {
      return response.json() 
    }
  })
  .then((posts) => {
    const parentPosts = document.querySelector(".infos")
    // 先清空旧帖子
    parentPosts.innerHTML = ''
    for(let post of posts){
      const orginalPost = document.querySelector("#demo")
      let newPost = document.createElement('div')
      newPost.innerHTML = orginalPost.innerHTML;
      newPost.classList.remove("orginal")
      newPost.className = 'info';
      // 从新创建的帖子内部获取节点，避免全局修改
      let postHead = newPost.querySelector(".postHead")
      let postP = newPost.querySelector(".postP")
      postHead.innerHTML = post.title;
      postP.innerHTML = post.body;
      parentPosts.appendChild(newPost)
    }
  });
}

2. 移除无效的remove函数 #

由于已经通过parentPosts.innerHTML = ''直接清空容器，原remove函数可以删除，无需保留。

3. 修正初始化调用 #

原代码中getPost()无参数调用会加载所有帖子，建议删除该初始化调用，仅在用户点击时触发加载：

// 移除这一行：getPost()
getUsers()

完整修正后的代码 #

<html>
   <head>
      <style>
body{
   background: linear-gradient(120DEG,#c0a397,#ebe6b4);
}
         .conterner{
         width: 100%;
         display: flex;
         flex-direction: row;
         }
         .users{
            margin: 2px;
            background: white;
            width: 30%;
            height: 100%;
         }
         .infos{
            margin: 2px;
            background: white;
            width: 70%;
         }
         .user{
            border-radius: 65px;
            background-color: rgba(187, 200, 200, 0.315);
            margin: 0 auto;
            cursor: pointer;
         }

         .user:hover,
         :active{
            border: rgb(224, 152, 132) 2px solid;
         }
         h3{
            padding: 1px;
            margin-left: 25px;
         }
         .info{
            border-radius: 23px;
            background-color: rgba(187, 200, 200, 0.331);
            margin: 8px;
            padding: 2px ;
            padding-left: 20px;
         }
         .line{
            width: 97%;
            margin:0;
            padding: 0;
            border-bottom: 1px solid black;
            }
            .dispaly{
               display: none;
            }
            .orginal{
               display: none;
            }
      </style>
   </head>

   <body>
      <main>
         <div class="conterner">

            <div class="users " >
               <div style="margin: 0 a;" id="parUser">
                  <div class="user" id="user" >
                     <h3 id="name"> Ahmed </h3>
                     <h3 id="email"> Ahmed.ali@gmail.com </h3>
                  </div>
               </div>
                
            </div>
            <div class="info orginal" id="demo">
               <h5 class="postHead" > post post postpost</h5>
               <div class="line"></div>
               <p class="postP"> post post postpost</p>
            </div>
            
            <div class="infos">
            </div>
         </div>
        
      </main>
      <script>
         

         function getUsers(userID){

       fetch('https://jsonplaceholder.typicode.com/users')
         .then((response) =>{
            if (response.ok) {
               return response.json() 
            }
         
         })
         .then((users) => {
            const orginalDiv = document.querySelector("#user");
            orginalDiv.style.display ='none';
            for(let user of users){
               const newDiv = document.createElement('div')
               newDiv.innerHTML= orginalDiv.innerHTML;
               newDiv.className="user";
               // 同样修改这里，从新创建的div内部获取节点
               const nameH = newDiv.querySelector('#name')
               nameH.innerHTML = user.name;
               const emailH = newDiv.querySelector('#email')
               emailH.innerHTML = user.email;
               const parentDiv = document.getElementById("parUser")
               parentDiv.appendChild(newDiv);
               newDiv.addEventListener("click", ()=>userEvent(user.id)) 
            }
            
                     return
         })
      }
      function getPost(userID){
         fetch('https://jsonplaceholder.typicode.com/posts?userId='+ userID)
         .then((response) =>{
            if (response.ok) {
               return response.json() 
            }
         
         })
         .then((posts) => {
            const parentPosts = document.querySelector(".infos")
            // 清空旧帖子
            parentPosts.innerHTML = ''
            for(let post of posts){
               const orginalPost = document.querySelector("#demo")
               let newPost = document.createElement('div')
               newPost.innerHTML = orginalPost.innerHTML;
               newPost.classList.remove("orginal")
               newPost.className = 'info';
               // 从新帖子内部获取元素
               let postHead = newPost.querySelector(".postHead")
               let postP = newPost.querySelector(".postP")
               postHead.innerHTML = post.title;
               postP.innerHTML = post.body;
               parentPosts.appendChild(newPost)
            }
         });
      }
      
     getUsers()

      function userEvent(id) {
         getPost(id);
      }

      </script>
      
   </body>
</html>

额外优化说明 #

• 用户列表创建时同样存在全局选择节点的问题，已一并修正为从新创建的div内部获取name和email节点，避免所有用户信息显示为最后一个用户的内容。
• 初始化时infos容器不再保留默认帖子，避免首次加载用户帖子时出现多余内容。

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