Замена div класса при нажатии на объект

Question

Всем привет, перейду сразу к делу: нужно, чтобы при нажатии на определённый объект полностью заменялся div на другой div из другого файла. Надеюсь на помощь, т.к. не силён в JS '''

<div class = "screen"> 
    <ul class = "screen_btns">
        <li>
            <div class = "scr_btn_fix" id="scr_btn1">
                <div class="btn_text"> 
                    text1
                </div>
                <div class = "btn">
                    text1.1
                </div>      
            </div>
        </li>
        <li>
            <div  class = "scr_btn_fix" id="scr_btn2">
                <div class="btn_text"> 
                    text2
                </div>
                <div class = "btn">
                    text2.1
                </div>      
            </div>          
        </li>
        <li>
            <div class = "scr_btn_fix" id="scr_btn3">
                <div class="btn_text"> 
                    text3
                </div>
                <div class = "btn">
                    text3.3
                </div>          
            </div>          
        </li>
        <li>
            <div class = "scr_btn_fix" id="scr_btn4">
                <div class="btn_text"> 
                    text4
                </div>
                <div class = "btn">
                    text4.4
                </div>          
            </div>          
        </li>
        <li>
            <div class = "scr_btn_fix" id="scr_btn5">
                <div class="btn_text"> 
                    text5
                </div>
                <div class = "btn">
                    text5.5
                </div>          
            </div>          
        </li>
    </ul>
</div>

'''

Answer 1

В js есть такие свойства как Свойство innerHTML ,или Свойство outerHTML которыми можно заменить и вставить нужный HTML. Куда будишь вставлять выбираешь с помощью например getElementById(id) или querySelector. Эти методы подойдут для вставки готовых HTML блоков. Есть второй вариант формируешь html с помощью js некий виртуальный html и вставляешь уже некий сформированный html через js фрагмент. Второй вариант это прям совсем тяжкая история если нужно формировать большой кусок HTML. Это конечно очень образно и совсем в кратенько, так как работа с DOM тоесть с деревом HTML элементами это прям в js отдельная большая тема. Но по тому что я набросал поищи в поисковике и найдешь кучу примеров. Например вот как работает outerHTML

<div>Привет, мир!</div>
<script>
  let div = document.querySelector('div');

  // заменяем div.outerHTML на <p>...</p>
  div.outerHTML = '<p>Новый элемент</p>'; // (*)

  // Содержимое div осталось тем же!
  alert(div.outerHTML); // <div>Привет, мир!</div> (**)
</script>

БЛОГ НА HUSL

Замена div класса при нажатии на объект

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