Нужно создать HTML элемент(button) с помощью javascript

Question

Пробую этот код, но ничего не получается

let newDiv = document.createElement('div')
let tone = document.createElement('button');
tone.textContent = 'Темнее';
tone.setAttribute('type', 'button');
newDiv.append('tone');
document.write(tone);

Answer 1

Потому что добавляем как document.body.appendChild(tone);

document.write() работает, когда страница находится в процессе загрузки

Answer 2

В newDiv.append('tone'); 'tone' -- просто слово, а не значение переменной tone.
У элемента есть appendChild.
newDiv так и не добавлен.
document.write работает со строкой, а не с элементом.

Читайте документацию по js и DOM. Пробуйте примеры еще проще.

Answer 3

Ваш вопрос звучит таким образом: Нужно создать 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;
}

БЛОГ НА HUSL

Нужно создать HTML элемент(button) с помощью javascript

Ответы (3 шт):