将外部 html 的 DIV 内容移动到另一个文件的 Div答案

【问题标题】：Moving DIV content of an external html to Div of another file将外部 html 的 DIV 内容移动到另一个文件的 Div
【发布时间】：2018-01-07 05:28:34
【问题描述】：

我有 3 个 html 文件。 Index.html 调用chat.html。 Chat.html 正文包含一个 DIV，我想用与 chat.html 位于同一文件夹中的第三个 HTML 文件 (star.html) 的 Div 填充该 DIV。

chat.html -

    <body>
        <div id="wrap">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header text-center">
                    <a href="#" class="navbar-brand">Chat - Group Menu</a>
                </div>
            </nav>
            <!-- Begin page content -->
            <div class="container" id="chatDiv">
                <div class="page-header">
                    <h1>Mobile Layout</h1>
                </div>
                <p class="lead">Chat stuff to appear here</p>
            </div>
        </div>
        <div id="testDIV"></div>
        <div id="footer">
             //some DIV content here
        </div>
</body>

star.html -

<body>
    <p> hello all </p>
</body>

我正在使用的 jquery 代码（在外部 .js 文件中）是 -

$(document).ready(function() {
            $("#stars").click(function() {
                alert("change DIV to show STAR stuff");
                $("#testDIV").load('star.html');
            });
        });

此处显示警报。但是内容并没有移动到chat.html div。

我在这里错过了什么？

【问题讨论】：

你点击的#stars元素在哪里？
还有，chat.html的加载情况如何？
"stars" 是我单击的图像的 id。它位于上面 chat.html 文件的页脚 DIV 中。此导航选项卡有 3 个图像。第二张图是星星。代码如下。

星星
index.html 有登录按钮。单击该按钮后，我会进行验证。它验证成功，我调用chat.html 页面。代码是 $('#loginBtn').click(function() { // $(this).validateEmail(); // $(this).validatePassword(); window.open("html/chat.html" ); });
各位，谁能帮忙？从昨天开始我就一直坚持下去，似乎没有喘息的机会。

标签： javascript jquery html

【解决方案1】：

看到您如何打开一个新窗口进行聊天，您需要处理该窗口才能操作该 DOM。如果您还没有添加 jQuery 到 chat.html 页面，可能还需要

    $('#loginBtn').click(function() {
      $(this).validateEmail(); 
      $(this).validatePassword(); 
      var window.popup =  window.open("html/chat.html"); 
    });

 $("#stars").click(function() {
     alert("change DIV to show STAR stuff");
     window.popup.document.$("#testDIV").load('star.html');
 });

【讨论】：

谢谢。我想保持点击分开，因为它们有很多特定于每个图像点击的功能。我仍然尝试根据您的建议查看它是否有效。不幸的是，它没有。
在这种情况下，您只需将popup 变量设为全局变量，我编辑了答案以反映此更改，我只需将其设置为window 对象