Создание новых узлов в html документе

предположим существует slide_block обвёртка и в ней уже существуют некоторое количество других div блоков

<div class="slide_block">
    
    <div class="slide" id="slide_2"></div>
    <div class="slide" id="slide_3"></div>
    <div class="slide" id="slide_4"></div>
    <div class="slide" id="slide_5"></div>
    
</div>

как вставить в начало новый html элемент

<div class="slide" id="slide_1"></div>

и так же как вставить в конец новый html элемент

<div class="slide" id="slide_6"></div>

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

Автор решения: Aziz Umarov

Предложу ещё вариант помимо предложенных вариантов @MaximLensky

let mainBlock = document.getElementsByClassName("slide_block")[0];

mainBlock.innerHTML += "<div class='slide' id='slide_1'>6</div>"; 
mainBlock.innerHTML = "<div class='slide' id='slide_1'>1</div>" + mainBlock.innerHTML; 
<div class="slide_block">
    
    <div class="slide" id="slide_2">2</div>
    <div class="slide" id="slide_3">3</div>
    <div class="slide" id="slide_4">4</div>
    <div class="slide" id="slide_5">5</div>
    
</div>

→ Ссылка