仅在需要时更新 HTML答案

【问题标题】：Update HTML only where needed仅在需要时更新 HTML
【发布时间】：2015-12-20 02:40:48
【问题描述】：

示例 HTML 页面：

<div>
  <ul>
    <li> 1 </li>
    <li> 2 </li>
  </ul>
</div>

然后在 ajax 请求中我得到

<div>
  <ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
  </ul>
</div>

是否可以在不替换的情况下更新第一个？在该特定示例中，它应该只将一个列表项附加到 UL。

但是，如果我不知道 HTML 代码的外观，我如何确定是否需要添加、删除等？

【问题讨论】：

这很奇怪。为什么要在 ajax 请求中返回 HTML？通常，您只需返回数据，然后更新页面上的元素。
使用append()函数$("ul").append("<li> 3 </il>")怎么样？
根据需要添加/删除列表项似乎很麻烦，特别是如果列表变得非常大。也许只是用一个新列表替换整个列表？
看看一些虚拟 DOM 实现。虽然，由于您在 AJAX 响应中返回 HTML，我不知道它最终是否会成为最好的方法。通常，如果您从 AJAX 返回数据，那将是理想的，例如[1,2]，然后是 [1,2,3]
为什么不更换呢？真的不清楚这里的主要问题是什么

标签： javascript jquery html dom-manipulation

【解决方案1】：

你的html代码需要这样

<div>
  <ul id="retrivingList">
    <li id="1"> 1 </li>
    <li id="2"> 2 </li>
  </ul>
</div>

你的 SQl 查询

$response["ids"] = array();
$response["list"] = array();

consider you need student roll no's from student tabel to appear in drop down

$studentDetail = "SELECT * FROM  `student`  WHERE 1 LIMIT 10";
$studentDetailExe = mysql_query($studentDetail) or die ("Error :".mysql_error());
while($data = mysql_fetch_assoc($studentDetailExe)){
    array_push($response["ids"],$data["rollNo"]);
    array_push($response["list"],"<li>".$data["rollNo"]."</li>");
 }

*rollNo is column name in student tabel

你的 js 代码

$.ajax({
    url: "trialDataRetrival.php",
    method: "POST",

})

.done(function(response) {
    var details = jQuery.parseJSON(response);
    $("ul#retrivingList").children("li").each(function(event){
        if($.inArray($(this).attr('id'),details.ids) >= 0){

        }else{
          //$.inArray() gives the position of element in the array 
          $("ul#retrivingList").append(details.list[$.inArray($(this).val(),details.ids)]);
        }
    });
})

.fail(function( jqXHR, textStatus ) {
       console.log( "Request failed: " + textStatus );
      alert("Request Failed");
});  });

【讨论】：