Proper way to manipulate innerHTML in JavaScript

I learned JavaScript very recently and not really familiar with it.
I’ve managed to make this wacky website.
I want those buttons on the left to change the contents of the panel that is adjacent to it.

document.getElementsByClassName('left-panel')[0].innerHTML = `INSERT HTML HERE`;

This is what I used to change the contents of the left-panel.
I wasn’t really sure what to do so I just copied the HTML code that I wanted to go in there and put it in the innerHTML.

This seems really messy to me, I don’t think putting HTML code in JavaScript is the best way to this but then again I don’t really know.

Is there anyway to do this in a better way?

Thank you.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Bruh</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="navbar">
            <p>Hello</p><br>
        </div>
        <div class="main-panel">
            <p>bro</p><br>
        </div>
        <div class="buttons">
            <div class="button">
                <div class="chat-button">
                        <img onclick="show();" id="chat-button" src="chat-dots.svg">
                </div>
                <div class="attendants-button">
                        <img onclick="show2();" id="attendants-button" src="suit-club-fill.svg">
                </div>
                <div class="tools-button">
                        <img onclick="show3();" id="tools-button" src="nut.svg">
                </div>
            </div>
        </div>
        <div class="screen">
            <video id="screen" src="a.mp4">
        </div>
        <div class="left-panel">
            <div class="tools">
                <div class="microphone">
                    <img id="mic" src="mic-fill.svg">
                    <!--  -->
                    <p id="mic-status"> on_off </p><br>
                    <label class="switch">
                    ‍‍‍‍‍‍‍‍    <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <!--  -->
                    <input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
                    <p>
                        volume
                    </p>
                </div>
                <div class="webcam">
                    <img id="webcam" src="camera.svg">
                    <!--  -->
                    <label class="switch">
                    ‍‍‍‍‍‍‍‍    <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <!--  -->
                    <video src="a.mp4" id="webcam-video">
                </div>
                <div class="options">
                    <img id="raise-hand-ico" src="hand-index.svg"><br>
                    <img id="like" src="hand-thumbs-up-fill.svg"><br>
                    <img id="dislike" src="hand-thumbs-down-fill.svg">
                </div>
                <div class="record">
                    <div class="buttons-and-stuff">
                        <h6 id="button-and-stuff">Record</h6><br>
                        <h6 id="button-and-stuff">Exit</h6>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script type="text/javascript" src="script.js"></script>
</body>
</html>




JavaScript:

function show(){

    document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="chat-box">
                <div class="chat-history">
                    <!--  -->
                    <div class="my-messages">
                        <div class="message-mine" id="message1">
                            <span class="sender">
                                me:
                            </span><br>
                            <span class="content">
                                testing...
                            </span>
                            
                        </div>
                    </div>
                    <!--  -->
                    <div class="messages">
                        <!--  -->
                        <div class="message" id="message1">
                            <span class="sender">
                                me:
                            </span><br>
                            <span class="content">
                                testing...
                            </span>
                            
                        </div>
                    </div>
                </div>
                <div class="chat-sending-area">
                    <div class="send-button">
                        <img class="send-message-button" src="chat-dots.svg">
                    </div>
                    <div class="text-box">
                        <textarea class="text-area">Write your message here...</textarea>
                    </div>
                </div>
            </div>`;

    }


function show2(){



    document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="attendants">
                <div class="Hosts">
                    <p class="head">Hosts</p><br>
                    <div class="all-the-hosts">
                        <p class="member"> name1 </p><br>
                    </div>
                </div>
                <div class="Presenters">
                    <p class="head">Presenters</p><br>
                    <div class="all-the-presenters">
                        <p class="member"> name2 </p><br>
                    </div>
                </div>
                <div class="Attendants">
                    <p class="head">Attendants</p><br>
                    <div class="all-the-attendants">
                        <p class="member"> name3 </p><br>
        
                    </div>
                </div>
            </div>`;            
}




function show3(){


    document.getElementsByClassName('left-panel')[0].innerHTML = `<div class="tools">
                <div class="microphone">
                    <img id="mic" src="mic-fill.svg">
                    <!--  -->
                    <p id="mic-status"> on_off </p><br>
                    <label class="switch">
                    ‍‍‍‍‍‍‍‍    <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <!--  -->
                    <input type="range" min="1" max="100" value="50" class="slider_" id="myRange">
                    <p>
                        volume
                    </p>
                </div>
                <div class="webcam">
                    <img id="webcam" src="camera.svg">
                    <!--  -->
                    <label class="switch">
                    ‍‍‍‍‍‍‍‍    <input type="checkbox">
                        <span class="slider round"></span>
                    </label>
                    <!--  -->
                    <video src="a.mp4" id="webcam-video">
                </div>
                <div class="options">
                    <img id="raise-hand-ico" src="hand-index.svg"><br>
                    <img id="like" src="hand-thumbs-up-fill.svg"><br>
                    <img id="dislike" src="hand-thumbs-down-fill.svg">
                </div>
                <div class="record">
                    <div class="buttons-and-stuff">
                        <h6 id="button-and-stuff">Record</h6><br>
                        <h6 id="button-and-stuff">Exit</h6>
                    </div>
                </div>
            </div>`;

}

Update:
Thanks for the responses. I think using a loop to append elements would make this a bit harder, but then again I don’t really know what that would look like, I just wanted to know if this is something that is commonly used, even though its not the best way to do it, or its an unholy abomination, in which case I would have to fix it.
I appreciate all the help. 🙂

1 thought on “Proper way to manipulate innerHTML in JavaScript”

  1. You can create elements dynamically and then append it on parent element inside a function by passing custom parameter.

    Example:

    const createSomeElement=(someSelectedDiv,someParameter,fetchData)=>{
    
      someSelectedDiv.innerHTML=`
        <label><b>Search</b></label>
    
    
        <div class="control has-icons-left has-icons-right">
        <input  class="input is-small clearInput"  placeholder="Search">
        <span class="icon is-small is-left">
        <i class="fas fa-search"></i>
        </span>
       
        </div>
    
        <div class="dropdown">
            <div class="dropdown-menu">
                <div class="dropdown-content results"></div>
            </div>
        </div>
    `;
    
    const input=document.querySelector('input');
    const dropdown=document.querySelector('.dropdown')
    const resultsWrapper=document.querySelector('.results')
    
    const onInput=async (event)=>{
        const items= await fetchData(event.target.value)
        
        for(let item of items){
            // dynamically create element
            const option=document.createElement('a') 
           
            option.classList.add('dropdown-item');
            // change html of element.
            option.innerHTML=`<span>dropdown item ${item.name}</span>`;
            // add some event listener.
            option.addEventListener('click',()=>{
                dropdown.classList.remove('is-active');
            })
            // append child to parent div.
           resultsWrapper.appendChild(option)
            
        }
    }
    
    Reply

Leave a Comment