Как добавить созданный HTML-элемент в другой HTML-файл?

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;">Нажми</button>
<button id="2" style="width: 100px; height: 30px;">Нажми</button>

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

У меня есть две кнопки в первом html-файле и основной div во втором html-файле. Когда я нажимаю кнопку в первом html-файле, я хочу обновить второй, добавив элемент h1 с соответствующим текстом. Оба html-файла связаны с одним js-файлом. Я пытался сделать это с помощью условного оператора pathname, но это не сработало.

Вы не можете сделать то, что ожидаете, таким образом.

Location.assign() (по умолчанию) перенаправит на другую (или не на другую) страницу. Все ваши скрипты перестанут выполняться, и любые переменные будут потеряны, включая вашу main. Эта функция обычно используется для регистрации изменения адреса в истории браузера (например, переход от якоря #some к #other и возможность вернуться к #some, нажав кнопку “Назад”).

Вам следует, как предложил Рори МаКроссан, сохранять состояние (или инструкции о том, что делать на другой странице) в некотором контексте между страницами (например, cookie, sessionStorage, localStorage и т.д.). Когда целевая страница загружается, она должна прочитать состояние/инструкции и делать то, что вы от нее ожидаете.

Чтобы достичь своей цели, вам нужно будет найти способ общения между двумя html-файлами. Поскольку html-файлы являются отдельными, после нажатия на кнопку страница перезагрузится, и основной элемент будет снова отрисован на второй странице. Проблема, с которой вы сталкиваетесь, заключается в том, что JavaScript выполняется по мере загрузки страницы, и поскольку страница перенаправляется, код для добавления тега h1 во втором html-файле выполняется слишком поздно.

Один из подходов для работы с этим — использовать localStorage или sessionStorage, чтобы сохранять данные между перезагрузками страниц или навигацией. Таким образом, вы можете сохранить информацию (например, какая кнопка была нажата) на первой странице, а затем получить и использовать ее на второй странице.

Вот обновленная версия вашего кода, которая использует localStorage для передачи данных между двумя страницами:
HTML 1:

    <button id="1" style="width: 100px; height: 30px;">Нажми</button>
    <button id="2" style="width: 100px; height: 30px;">Нажми</button>

HTML 2:

<main id="main">мой тест</main>

Js:

 // Выбираем кнопки и основной контейнер
const button1 = document.getElementById('1');
const button2 = document.getElementById('2');
const main = document.getElementById('main');

// Функция для обработки нажатий кнопок и перенаправления
function myFunc() {
    // На первой странице (index.html) сохраняем, какая кнопка была нажата
    button1.onclick = () => {
        localStorage.setItem('buttonClicked', '1'); // Сохраняем информацию о нажатии
        location.assign('2.html'); // Перенаправляем на вторую страницу
    };

    button2.onclick = () => {
        localStorage.setItem('buttonClicked', '2'); // Сохраняем информацию о нажатии
        location.assign('2.html'); // Перенаправляем на вторую страницу
    };

    // На второй странице (2.html) проверяем localStorage на предмет информации о нажатии кнопки
    if (location.pathname === '/2.html') {
        const clickedButton = localStorage.getItem('buttonClicked');

        if (clickedButton) {
            const elem = document.createElement('h1');
            elem.textContent = clickedButton; // Устанавливаем текст в зависимости от того, какая кнопка была нажата
            main.appendChild(elem); // Добавляем элемент в основной контейнер
            localStorage.removeItem('buttonClicked'); // Очищаем сохраненное значение после использования
        }
    }
}

myFunc();

Ваши html-файлы находятся на сервере. Ваш JavaScript-файл также находится на вашем сервере. Посетитель вашего сайта вводит веб-адрес вашего сайта в адресной строке браузера и нажимает Enter. В этот момент запрос отправляется из веб-браузера указанного пользователя на ваш сервер. Этот запрос запрашивает веб-страницу.

Ваш сервер получает этот запрос, загружает или генерирует HTML, чтобы ответить на запрос, и вставляет встроенный JavaScript как внутреннее содержимое тегов script или ссылается на JavaScript файл(ы) через атрибут src тега script.

Таким образом, HTML генерируется/загружается сервером во время подготовки ответа на запрос, а JavaScript выполняется в браузере пользователя. Браузер вашего пользователя не может получить доступ к вашим html-файлам, потому что они находятся на сервере, а не на браузерах ваших пользователей. Вот почему прямое изменение файла невозможно. Вы можете перенаправить на второй html через:

window.location.href="https://stackoverflow.com/questions/79174928/your/url/here";

но вы не можете записывать в удаленный файл, находящийся на сервере, из клиентского браузера. Это технически невозможно, и было бы также небезопасно разрешать вашим пользователям перезаписывать ваши файлы.

Поэтому вместо этого имеет гораздо больше смысла использовать form и отправлять запрос через него, передавая значимый параметр, который сервер поймет и добавит к содержимому HTML.

Я настоятельно рекомендую вам не позволять пользователям изменять ваши файлы, поэтому вместо этого сохраните ввод ваших пользователей и значимые действия либо в вашем клиенте (localStorage или sessionStorage), либо внутри пользовательских сессий на стороне сервера или даже в базе данных. И когда вы генерируете ваш HTML, убедитесь, что вы учитываете пользовательскую сессию и добавляете любое содержимое, которое вы хотите.

Неясно, какая у вас серверная технология, но вы можете обернуть ваши кнопки в form и добавить hidden ввод со значением, которое будет изменено на правильное значение при нажатии кнопки:

<form action="/my-action" method="POST">
    <hidden name="myaction">
    <button id="1" style="width: 100px; height: 30px;">Нажми</button>
    <button id="2" style="width: 100px; height: 30px;">Нажми</button>
</form>

и событие для ваших кнопок:

window.addEventListener("load", function() {
    for (let button of document.querySelectorAll("#1, #2")) {
        button.addEventListener("click", function() {
            let context = this.parentNode;
            context.querySelector("input").value = this.id;
            context.submit();
        });
    }
});

Ваш серверный код должен обрабатывать отправку form, получать, что параметр myaction, и записывать это в журнал (внутри пользовательской сессии, базы данных и т.д.) и загружать соответствующий HTML, где журнал, который вы только что обновили, должен быть динамически загружен и отображен.