Пробую этот код, но ничего не получается
let newDiv = document.createElement('div')
let tone = document.createElement('button');
tone.textContent = 'Темнее';
tone.setAttribute('type', 'button');
newDiv.append('tone');
document.write(tone);
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПотому что добавляем как
document.body.appendChild(tone);
document.write()
работает, когда страница находится в процессе загрузки
В newDiv.append('tone');
'tone'
-- просто слово, а не значение переменной tone
.
У элемента есть appendChild
.
newDiv
так и не добавлен.
document.write
работает со строкой, а не с элементом.
Читайте документацию по js и DOM. Пробуйте примеры еще проще.
Ваш вопрос звучит таким образом: Нужно создать HTML элемент(button) с помощью javascript
Можно так, используя createElement
const button = document.createElement('button');
button.innerHTML = 'Нажми';
button.classList.add('btn');
document.body.append(button);
*,
*::before,
*::after {
box-sizing: border-box;
}
.btn {
border: 2px solid white;
background-color: black;
color: white;
outline: none;
padding: 5px;
cursor: pointer;
transition-property: color, background-color, border-color;
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
}
.btn:hover {
border-color: black;
background-color: white;
color: black;
}
Или так, используя insertAdjacentHTML
const button = '<button class="btn">Нажми</button>'
document.body.insertAdjacentHTML('beforeend', button);
*,
*::before,
*::after {
box-sizing: border-box;
}
.btn {
border: 2px solid white;
background-color: black;
color: white;
outline: none;
padding: 5px;
cursor: pointer;
transition-property: color, background-color, border-color;
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
}
.btn:hover {
border-color: black;
background-color: white;
color: black;
}
newDiv
если все равно не добавляете на страницу?