Как создать элемент на пустой странице на js [закрыт]

129
28 октября 2019, 01:10

Для примера, есть пустая страница на html, кроме тега script на ней ничего нет. Подскажите как создать на ней блок или абзац. Только vanilla пожалуйста.

Answer 1

// var YourVarriableName = document.createElement("ElementWhatYouNeed"); 
// YourVarriableName.textContent = "YourSomeTextForTheElement"; 
// document.body.appendChild(YourVarriableName); 
 
var block = document.createElement("div"); 
block.textContent = "Блок"; 
document.body.appendChild(block); 
 
var paragraph = document.createElement("p"); 
paragraph.textContent = "Параграф"; 
document.body.appendChild(paragraph);

Answer 2

Для создания элементов можно воспользоваться методом document.createElement.

Данный метод принимаем имя элемента, который нужно создать и возвращает созданный элемент.

Для того, чтобы элемент отобразился на странице, его нужно добавить в один из элементов, которые уже есть. Например в элемент body.

Добавить можно с помощью метода .appendChild

Пример:

document.body.appendChild(document.createElement('div'));
div { 
  width: 100px; 
  height: 100px; 
  border: 1px solid red; 
}

Альтернативным вариантом может стать вставка html строки, с помощью свойства innerHTML, либо метода insertAdjacentHTML

document.body.innerHTML = `<p class="d">1</p>`; 
 
document.body.insertAdjacentHTML('beforeend', `<div class="d2">2</div>`);
.d { 
  background-color: green; 
} 
 
.d2 { 
  background-color: red; 
}

READ ALSO
Как протестировать componentDidMount при помощи jest и enzyme, в котором вызывается функция не из props

Как протестировать componentDidMount при помощи jest и enzyme, в котором вызывается функция не из props

Подскажите, как можно протестировать данный компонент при помощи jest и enzyme

126
js считает +1 год в дни рождения

js считает +1 год в дни рождения

Неправильно считает день рожденият,е если сегодня 26 февраля 2019, а др стоит где-нибудь 10

116
Задержка в each

Задержка в each

как сделать задержку на переход к следующему элементу и событие submit? есть формы у товара с разными размерами

112
Slider Range ввод в поле

Slider Range ввод в поле

подскажите как обработать ввод в инпуты и чтобы ползунок менял значение

111