如何更改每页 javascript 中的占位符内容答案

【问题标题】：How do I change placeholder content in javascript per page如何更改每页 javascript 中的占位符内容
【发布时间】：2022-08-19 08:40:08
【问题描述】：

如何使用 javascript 更新用 Jquery .load() 加载的内容？

我在每个页面上使用了两个占位符：一个带有导航栏，一个带有内容的主要骨架，如下所示：

    <body>
      <div id=\"nav-placeholder\">
      </div>
      <div id=\"content-placeholder\">
      </div>
    </body>

导航栏和内容都在单独的文件中，并通过外部 javascript 文件加载到页面中，如下所示：

$(function(){
  $(\"#nav-placeholder\").load(\"nav.html\");
});

$(function(){
  $(\"#content-placeholder\").load(\"content.html\");
});

到目前为止，一切都很好。现在，我正在尝试分别更改每个页面的内容（使用 JS）

content.html 的一部分是例如

<h2 id=\"subheader1\">Title</h2>

我正在尝试更改 javascript 文件中的 #subheader1 内容，如下所示：

$(function(){
  $(\"#nav-placeholder\").load(\"nav.html\");
});

$(function(){
  $(\"#content-placeholder\").load(\"content.html\");
});

$(document).ready(function() {
  document.getElementById(\"subheader1\").outerHTML = \"test\" ;
});

但这不起作用（这是针对所有页面的，但仍然不起作用）。可能是因为它只看到 index.html 中的占位符 DIV 而不是它的内容？

我尝试将 subheader1 div 放在index.html 中进行测试，然后它确实起作用了，但这会带走占位符的效率。

有什么方法可以做到这一点（或者另一种方法可以更有效地处理具有相同（DIV）布局但文本不同的页面？）

谢谢！

为什么不使用回调来改变outerHTML 来测试呢？还是成功后执行操作？
@RajeshPaudel 好主意，试过了，但不幸的是仍然不起作用。
你能用你试过的东西更新一下吗？
这回答了你的问题了吗？ How to update the DOM after jQuery .load()?

标签： javascript html jquery

【解决方案1】：

load 方法不是同步的，所以

$(document).ready(function() {
  document.getElementById("subheader1").outerHTML = "test" ;
});

在页面加载 html 之前执行。

doc 建议使用回调函数。

它在后处理和 HTML 插入完成后执行

我在我的 js 文件中成功使用了它：
$(document).ready(function() {
    $(function(){
        $("#nav-placeholder").load("./nav.html", function() {
            document.getElementById("insideNav").outerHTML = "It works !" ;
        });
    });
});
在我的nav.html 中有<h2 id="insideNav">Original Nav Bar</h2>。

【讨论】：