如何更改每页javascript中的占位符内容
如何更改每页javascript中的占位符内容
提问于 2022-08-17 08:58:50
如何用javascript更新Jquery .load()加载的内容？
我在每个页面上使用两个占位符:一个带有导航栏，另一个带有内容的主框架，如下所示：
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>nav栏和内容都位于单独的文件中，并以如下方式加载到带有外部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)，但文本不同)？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-17 14:52:17
load方法是不同步的，所以
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});在页面中加载html之前执行。
文档建议使用回调函数。
它在执行后处理和HTML插入后执行。
我在js文件中成功地使用了这个：
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});<h2 id="insideNav">Original Nav Bar</h2>在我的nav.html里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73392351
复制相关文章
点击加载更多
相似问题
如何更改输入占位符颜色javascript onmouseover，更改占位符值onmouseover？
更改Javascript for Chrome中的占位符颜色
内容占位符Javascript对象预期错误
如何使用Javascript更改CSS占位符颜色
如何使用jQuery更改字体内容的占位符？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
