如何将创建的html元素附加到另一个html文件？

Question

const button1 = document.getElementById('1');
const button2 = document.getElementById('2');

const main = document.getElementById('main');

function myFunc() {

    const elem = document.createElement('h1');

    button1.onclick = () => {

        location.assign('2.html');
        elem.textContent = '1';
        
            if (location.pathname === '/2.html') {
                main.appendChild(elem);
            }
        }

    button2.onclick = () => {
        location.assign('2.html');
        elem.textContent = '2';
        
            if (location.pathname === '/2.html') {
                main.appendChild(elem);
            }
    }
}

myFunc();

<button id="1" style="width: 100px; height: 30px;">Click</button>
<button id="2" style="width: 100px; height: 30px;">Click</button>

<main id="main"></main>

我在第一个 html 文件中有两个按钮，在第二个 html 文件中有一个主 div。当我按下第一个 html 文件中的按钮时，我想通过在 h1 elem 后面附加足够的文本内容来更新第二个文件。两个 html 文件都连接到同一个 js 文件。我尝试使用条件路径名来执行此操作，但它不起作用。

Answer 1

你无法按照你现在的方式做你期望做的事。

Location.assign()

将（默认情况下）导航到另一个（或不）页面。您的所有脚本都将停止运行，所有变量都将被丢弃，包括您的

main

。该功能通常用于在浏览器的历史日志中注册地址修改（例如从锚点

#some

到

#other

并允许按后退按钮返回到

#some

）。

您应该按照 Rory McCrossan 的建议，将状态（或在另一个页面执行操作的说明）存储在某些跨页面上下文（如 cookie、sessionStorage、localStorage...）中。当目标页面加载时，它应该读取状态/指令并执行您期望它执行的操作。