JavaScript 附加而不是使用 InnerHTML 属性覆盖答案

【问题标题】：JavaScript Appending Rather Than Overwriting Using InnerHTML PropertyJavaScript 附加而不是使用 InnerHTML 属性覆盖
【发布时间】：2017-07-26 09:48:43
【问题描述】：

所以这是一个奇怪的问题，因为我发现的每个主题都与我的问题完全相反。

我在 SharePoint Online 中使用一些 JavaScript 来替换某些元素的 innerHTML，但每当函数运行时，它都会附加内容而不是覆盖它。

我已经尝试过将 innerHTML 设置为其他内容的 JS 方法，然后设置为值（不走运），并将其移至 jQuery 调用来设置它。在这两种情况下，它都做同样的事情。在 Edge 和 Chrome 上都发现了同样的问题。

代码如下 - 有什么想法吗？（没有包含整个脚本，只包含特定功能，因为它是一个相当大的脚本，其他部分按预期工作）。

function getThisCompany() {
  thisCompanyEnum = thisCompany.getEnumerator();
  while (thisCompanyEnum.moveNext()) {
      var currentCompany = thisCompanyEnum.get_current();
      var thisCompanyId = currentCompany.get_item('ID');
      var thisCompanyName = currentCompany.get_item('companyName');
      var thisCompanyPhone = currentCompany.get_item('companyPhone');
      var thisCompanyUrl = currentCompany.get_item('companyUrl');
      var thisCompanyLogo = currentCompany.get_item('companyLogo');

      // Check for a null value - if it is null console throws an error and stops the script, so load a default logo
      if (thisCompanyLogo == null) {
        thisCompanyLogo = "https://consiliumuk.sharepoint.com/POC/minicrm/CRM%20Images/nologo.png";
      }
      else {
        thisCompanyLogo = thisCompanyLogo.get_url();
      }

      var thisCompanyAddress = currentCompany.get_item('companyAddress');
      var thisCompanyMarkupBlock = "<table><tr><td colspan=2><b>";
      thisCompanyMarkupBlock += thisCompanyName;
      thisCompanyMarkupBlock += "</b></td></tr><tr><td colspan=1 valign=top><img height=100 width=100 src='";
      thisCompanyMarkupBlock += thisCompanyLogo;
      thisCompanyMarkupBlock += "' /></td><td colspan=1 valign=top>";
      thisCompanyMarkupBlock += thisCompanyAddress;
      thisCompanyMarkupBlock += "<p /><i>";
      thisCompanyMarkupBlock += thisCompanyPhone;
      thisCompanyMarkupBlock += "</i><br /><a href=";
      thisCompanyMarkupBlock += thisCompanyUrl;
      thisCompanyMarkupBlock += ">Visit company website</a></td></tr></table><p /><input id='loadExtended' type='button' value='Load' onClick='loadExtendedDetails(";
      thisCompanyMarkupBlock += thisCompanyId;
      thisCompanyMarkupBlock += ");' />";
      alert(thisCompanyMarkupBlock);

      //document.getElementById('detailsSpace').innerHTML = "Loading...";
      //document.getElementById('detailsSpace').innerHTML = thisCompanyMarkupBlock;
      jQuery("#detailsSpace").html(thisCompanyMarkupBlock);
    }   
  }

【问题讨论】：

标签： javascript jquery html frontend sharepoint-online

【解决方案1】：

您可以使用 clear 和 append 代替 .html()，确保您的容器是空的，例如：

jQuery("#detailsSpace").empty(); // Before while

while ([...]){
   [...]
   jQuery("#detailSpace").append(thisCompanyMarkupBlock); // Instead of html()
}

【讨论】：

带着这种心态，你最终会在你的代码中用胶带粘住所有东西。
@AbhinavGauniyal 你能告诉我原因吗？作为一个解决方案，它有效，但我总是想了解更多，所以如果它一点也不好，我想知道原因
@AbhinavGauniyal 我同意一个像样的模板引擎会比所有简单的 JS 连接更好。然而，如果您发布一些有用的东西而不是仅仅对可行的答案嗤之以鼻，那就更好了。此外，我觉得 OP 的代码比这个答案更合适。
@AbhinavGauniyal 我也同意使用模板比普通 JS 好得多，但他要求为这个特定问题提供解决方案。如果他要求其他方法来做到这一点，我会写更多的解决方法。无论如何感谢您的回复。
@Diego 我对模板引擎只字未提；）我写评论是因为 OP 的问题挑战了innerHTML 属性的通常行为 - Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element。因此，您的答案并没有解决这个问题，而是提供了一种解决方法。我同意您的回答可能会解决问题，但这对我来说是管道胶带方法，因为最初的意外行为尚未解决并且仍然存在于代码中。

【解决方案2】：

发现问题 - 有另一个函数，由于循环，它在重新处理时保留了前一组返回的 HTML。 jquery.empty() 函数被放置在正确的位置，同时再次声明字符串为 null，现在已修复。

【讨论】：