Это работает, но возникает странная ошибка отображения, когда изначально кнопки намного больше, чем они должны быть, и быстро возвращаются к размеру, который они должны быть.
Даже если вашэлементы полностью создаются, когда вы добавляете их в свой контейнер, ваш браузер должен пересчитать ваш поток, чтобы элементы поместились внутри.При этом ваши элементы могут изначально не иметь правильных значений, что иногда может привести к странному поведению.
Создание таких элементов неэффективно.Вам лучше написать свой HTML со всем внутри, , включая элементы, которые вы хотите показать, и те, которые вы хотите скрыть , и менять их свойства на ходу.Вы избежите длинного, трудно поддерживаемого кода javascript и получите более стабильное поведение.
Вот скрипка, которая как бы воспроизводит то, чего вы пытаетесь достичь:
// Script.js
// Load all the elements you need to operate on
const container = document.querySelector('#container');
const staticElements = container.querySelectorAll('.static');
const editElements = container.querySelectorAll('.edit');
const inputField = container.querySelector('input');
const title = container.querySelector('.title');
// Hide all static elements, and display the edit ones
function setEditMode() {
inputField.value = title.innerHTML;
for (const element of staticElements) {
element.classList.add('hidden');
}
for (const element of editElements) {
element.classList.remove('hidden');
}
}
// Reverse of above function
function setStaticMode() {
for (const element of staticElements) {
element.classList.remove('hidden');
}
for (const element of editElements) {
element.classList.add('hidden');
}
}
// Call above, but before update static value
function save() {
title.innerHTML = inputField.value;
setStaticMode();
}
/* style.css */
#container {
display: flex;
}
#container > * {
margin: 5px;
}
.editable {
font-size: 20px;
color: #AAAAAA;
}
.button {
border-style: solid;
border-color: lightblue;
border-width: 1px;
border-radius: 3px;
padding: 3px;
cursor: pointer;
}
.editActions {
display: flex;
}
.editActions > * {
margin: 0 5px;
}
.hidden {
display: none;
}
<!—-index.html—->
<div id="container">
<div class="title static">Enter a title</div>
<input type="text" class="hidden edit">
<div class="button static" onClick="setEditMode()">
edit
</div>
<div class="hidden editActions edit">
<div class="button" onClick="setStaticMode()">
cancel
</div>
<div class="button" onCLick="save()">
save
</div>
</div>
</div>
Смотрите, здесь мы не модифицируем DOM из javascript, и все выглядит ясно, ведя себя как ожидалось.
ЕслиВы должны построить HTML из javascript, делать это осторожно и как можно реже.Вы можете перейти отсюда и адаптировать свой код, чтобы увидеть, насколько эффективны изменения.