Динамически изменять содержимое веб-страницы [закрыто] ⇐ CSS

[Anonymous]

Я хочу изменить все содержимое веб-страницы на основе загрузки файла.
Динамически изменить веб-страницу и отобразить ее на этой странице, и у нас есть входные данные для этой новой страницы. >
При загрузке новой страницы нам необходимо позже преобразовать входные данные в файл JSON.
Можно ли изменить все содержимое веб-страницы, добавив файл?
Я попробовал, но это похоже на добавление нового содержимого на веб-страницу.
Я хочу удалить старое содержимое на основе файла. Мы динамически создаем новую веб-страницу с древовидной структурой.
Мой код:

Код: Выделить всё

function openForm(formId) {
var forms = document.getElementsByClassName('form-container');
for (var i = 0; i < forms.length; i++) {
forms[i].style.display = 'none';
}
document.getElementById(formId).style.display = 'block';
}
document.addEventListener("DOMContentLoaded", function() {
const parentNodes = document.querySelectorAll('.parent-node');
parentNodes.forEach(parentNode => {
parentNode.addEventListener('click', function() {
const childMenu = this.querySelector('.child-menu');
if (childMenu) {
childMenu.style.display = childMenu.style.display === 'none' ? 'block' : 'none';
}
});
});

const childNodes = document.querySelectorAll('.child-node');
childNodes.forEach(childNode => {
childNode.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent the click event from bubbling up to the parent nodes
const subchildMenu = this.querySelector('.subchild-menu');
if (subchildMenu) {
subchildMenu.style.display = subchildMenu.style.display === 'none' ? 'block' : 'none';
}
});
});
});

Код: Выделить всё

body {
font-family: Arial, sans-serif;
display: flex;
}

.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar-menu,
.child-menu,
.subchild-menu{
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu >  .parent-node{
cursor:pointer;
padding:10px;
margin-bottom: 5px;
}
.child-node,
.subchild-node{
cursor: pointer;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.child-menu,
.subchild-menu{
display: none;
}

.sidebar a, .tree span {
padding: 10px 15px;
text-decoration: none;
font-size: 18px;
color: #f2f2f2;
display: block;
}

.sidebar a:hover, .tree span:hover {
background-color: #575757;
color: white;
}

.main-content {
margin-left: 250px;
padding: 20px;
width: 100%;
}

.tree ul {
list-style-type: none;
padding-left: 20px;
}

.tree li {
padding: 8px;
cursor: pointer;
}

.form-container {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 20px;
}

.form-container.active {
display:  block;
}

Код: Выделить всё

    Demo Webpage


[list]
[*]
Vehicle


Type1


Motor1

[*]
Motor2

[/list]

[*]
Type2
[list]

Motor1

[*]
Motor2

[*]
Motor3

[/list]





Change the content


Input Form

Vehicle
Vehicle Name:




Type1
Type1 Name:




Motor1
Motor1 Name:




Type2
Type2 Name:




Motor2
Motor2 Name:




Motor3
Motor3 Name:

Подробнее здесь: https://stackoverflow.com/questions/787 ... he-webpage