Как ограничить страницы и контент в них. Чтобы на других страницах не было видно
 

Добрый день всем. Возникла проблема которую не очень понимаю как решить. Есть 4 страницы сперва было на html, потом я перевел на JS динамически. Ивозникла проблема что контент из 1 странцы (home) виден и на других страницах, так как я указал в querySelector('main'). Я знаю видно везьде ведь этот main глобальный и я указал что он создает после body, но вот как мне тогда ограничить другие страницы я не знаю.

Вот где создает main для всех страниц

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));

Вот для примера 2 страницы с блоками опять же которые видны на всех страницах а должны только на одной своей странице

function contact(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-con');
    box2.classList.add('box-con__con');
    box.append(box2);
    root.append(box);
}

contact(document.querySelector('main'));

function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));

P.S. Полность не могу кинуть слишком много места занимает. Но там все есть чтобы понять проблему.Заранее спасибо кто поможет

Так ты генери те страницы только когда нужны именно они...
Зачем делать их все сразу?

Вы меня не правильно поняли. У меня сайт из 4 разных страниц(home,server,contact, portfolio). В

header

я их добавил, ну типо как переходы между страниц. И вот проблема что каждая страница видит контент который на других страница. Ну если проще на странице home только изображения без единого текста, а на странице services только текст и все. Так вот, не важно какая из них смотрится я вижу как картинки, так и текст, хотя не должен. Может так я лучше описал ситуацию. И выше написал что не понимаю к чему привязываться ведь главный елемент main я добавил в body и он везде на любой странице, го мне нужно что в нем контент менялся зависимо от страниц

Удаляй его содержимое, потом вставляй в него нужное

Все я правильно понял... :)
Эти страницы разные пока в твоей голове, а по факту они все в куче.

Так это ж лишнее кодописание. Типо добовлять что при нажатии на кнопку (contact) будет удалятся все элементы не связаные с этой страницой. Мне кажется это убьет все и сайт будет грузится очень долго

Чему там грузиться то?
Во-первых какой смысл динамически генерировать статическое содержимое?
Ну если так уж хочется, то можно генерить 4 секции, соответствующие страницам. Сразу, или по мере перехода на эту секцию, и по необходимости переключать их, либо через display: none/block, либо отсоединять (не удаляя) и подключать к DOM.

Так, например, работает React. :D

Если я правильно понял, нужно событие клика добавить на ссылку которая на другую страницу перекидывает. И типо добавить

element.style.display = "none"

, а для нужной страницы(елементу страницы) добавить

element2.style.display = "block"

, но она мне кажется так не работает. Я писал в 4 разных js файлах и вроде как я не смогу обратится к элементам из других стран будет писать "is not defined"(это если я буду пытаться из 4 js файла попытаться его элементы объявить в других там 1,2,3 js файл )

Сделай уже тестовый пример...
На пальцах у тебя не особо получается.

Или переходи уже на Vue.JS или React.JS...

Надеюсь так будет понятней
 

В src есть папки
services-page - страница services со стилями и как для теста разноцветные блоки
portfolio-page - страница portfolio со стилями и как для теста разноцветные блоки
main-page - страница home со стилями и как для теста разноцветные блоки
contact-page - страница contact со стилями и как для теста разноцветные блоки
header-js - шапка
main-js - там где создается тег

main

после

body

index.js - импорт стилей и элементов

Ну так вот все это разноцветные блоки из services-page, portfolio-page, main-page, contact-page. Они ведны на всех страницах, а моя цель чтобы под каждой странице был свой разноцветный блок и не поаторялся на других страницах.Чтобы у каждой странице был только по 1 разноцветному блоку, а не по 4 как у меня

P.S. node_modulse не вышло добавить слишком большой.:help: :help: :help: