Javascript innerHTML 代码不起作用答案

【问题标题】：Javascript innerHTML code not workingJavascript innerHTML 代码不起作用
【发布时间】：2023-03-12 15:41:01
【问题描述】：

我已经搜索了很多，我可以找到一个解决方案，但不是我想要的，我知道应该可以使用菜单链接（一个 div）作为触发器来更改文档中 div 元素中的 HTML ，但我找不到办法。这是我目前得到的代码：

目标 DIV (HTML)：

<div id="mainContent" class="content"><!-- content will be loaded here --></div>

触发菜单 (HMTL)：

<a id="load_test" href="#"><div class="menu">Services</div></a>

在这种情况下，CSS 并不重要...所以这里是 jQuery：

$(document).ready( function() {
    $("#load_test").click(function(){
        $('#mainContent').html("<object type='text/html' data='test.html'></object>");
    })
});

这是我做错了什么：

<script type="text/javascript" src="script.js"></script>
<script src="jquery-1.10.2.min.js"></script>

他们需要切换：

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="script.js"></script>

【问题讨论】：

我看不出这段代码有什么问题。控制台有错误吗？
Uncaught ReferenceError: $ is not defined
您需要包含 jQuery 才能使 jQuery 代码工作。因此 ReferenceError
对我来说，它有效：jsfiddle.net/lexingtonpenguins/LdvdH
说真的，我不知道必须在 js 文件之前插入 jQuery 文件。只需要在区域中切换 2 个

标签： jquery html replace

【解决方案1】：

使用 iframe 加载您的 test.html 页面并确保在脚本之前包含 jQuery 文件

$( function() {
    $("#load_test").click(function(){
        $('#mainContent').html("<iframe src='test.html' width='100' height='100'></iframe>");
    })
});

【讨论】：

【解决方案2】：

首先，在控制台输入jQuery，看看是否定义了。如果是，试试这个：

(function($) { 
    $("#load_test").click(function(){
        $('#mainContent').html("<object type='text/html' data='test.html'></object>");
    })
})(jQuery);

如果不是，那么您包含脚本的方式可能有问题。

【讨论】：