在不同的html文件中将html从一个元素替换为另一个元素

Replace html from one element to another in different html file

本文关键字：元素 html 一个 另一个 替换 文件      更新时间：2023-11-09

我想用另一个html文件中的另一个元素的内容替换一个元素中的内容。

我看过很多JS&JQ的功能是使用document.getElementById和$(this)等对同一html文件中的元素执行此操作，但这是否可以将一个元素的内容替换为单独html文件中另一个元素？下面是我的问题的一个例子。

pageOne.html文件

    <!DOCTYPE html>
    <html>
        <head>
        <title>Page 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#first").click(function() {
                    $("#second").html($(this).html());
                 });
            });
        </script>
            <body>
                <p id = "first">Hello</p>
                <a href="pageTwo.html" target="_self">Page 2</a>
            </body>
    </html>

pageTwo.html

    <!DOCTYPE html>
    <html>
        <head>
        <title>Page 2</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
            <body>
                <p id = "second">World!</p>
                <a href="pageOne.html" target="_self">Page 1</a>
            </body>
    </html>

我尝试了不同的方法来做到这一点，如下所示，但我就是不明白：

<html>
    <head>
        <script>
            function myFunction() {
                document.getElementById("#second").innerHTML = #first;
            }
        </script>
    </head>
        <body>
            <p id = "first" onclick = "myFunction()">Hello</p>
        </body>
</html>

这可能吗？当你点击第一个元素时，它会用另一个html文件中的第一个元素内容替换第二个元素中的内容？因此，当您在页面之间单击时，<p>的内容将是相同的。

您要查找的内容称为Tabbed Contents。如果你在谷歌上搜索，你会发现很多样品。

检查以下链接：

http://jqueryui.com/tabs/

http://www.menucool.com/tabbed-content

http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery

希望这有帮助：）

请注意，javascript/jQuery只能操作网页上的元素（即显示的网页，DOM）因此，可以更改用户正在查看的渲染页面上的内容这些语言既不能保存到用户的本地计算机，也不能保存回web服务器。

HTML <form>可以将数据从一个HTML页面传输到另一个，但不能更新服务器上的.html页面。

要在服务器上进行更改，必须使用服务器端语言，如PHP或asp.Net.

到目前为止，最常见的是PHP，因为它是XAMPP、LAMP、WAMP、MAMP等中的"p"。GoDaddy、NameCheap、HostGator等大型托管公司提供的大多数共享托管包都是LAMP堆栈（Linux、Apache、MySJP、PHP）。如果您的服务器上安装了PHP，那么您所要做的就是使用扩展名.php而不是.html来命名文件事实上，您再也不用使用.html了——每个文件都可以命名为.php，它的工作方式与以.html结尾的文件完全相同——只是，如果需要，它现在可以处理PHP代码

要在自己的计算机上使用PHP，请安装XAMPP（适用于OSX、Windows和Linux）请注意，web文件夹是c:'xampp'htdocs，您可以通过在浏览器地址栏中键入（仅）localhost来"查看"网页。

以下是一系列关于PHP的（免费）教程视频。

当我重读你的问题时，我相信HTML表单可以满足你的要求。您的Web服务器上需要这两个文件：first.html和second.php

first.html

<!DOCTYPE html>
<html>
    <body>
        <form action="second.php" method="post">
            <input name="firstname" type="text" value="Jonathan" />
            <input type="submit" value="Submit Now">
        </form>
    </body>
</html>

second.php

<?php
    $fn = $_POST['firstname'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>You sent the name: <?php echo $fn; ?></p>
    </body>
</html>
相关文章：