Proper way to manipulate innerHTML in JavaScript

Question

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:

JavaScript:

function show(){

    document.getElementsByClassName('left-panel')[0].innerHTML = `
                
                    
                    
                        
                            
                                me:
                            

                            
                                testing...
                            
                            
                        
                    
                    
                    
                        
                        
                            
                                me:
                            

                            
                                testing...
                            
                            
                        
                    
                
                
                    
                        
                    
                    
                        Write your message here...
                    
                
            `;

    }


function show2(){



    document.getElementsByClassName('left-panel')[0].innerHTML = `
                
                    Hosts


                    
                         name1 


                    
                
                
                    Presenters


                    
                         name2 


                    
                
                
                    Attendants


                    
                         name3 


        
                    
                
            `;            
}




function show3(){


    document.getElementsByClassName('left-panel')[0].innerHTML = `
                
                    
                    
                     on_off 


                    
                    ‍‍‍‍‍‍‍‍    
                        
                    
                    
                    
                    
                        volume
                    
                
                
                    
                    
                    
                    ‍‍‍‍‍‍‍‍    
                        
                    
                    
                    
                
                    

                    

                    
                
                
                    
                        Record


                        Exit
                    
                
            `;

}

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. :)

singhAmandeep007 · Accepted Answer

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=`
    Search


    
    
    
    
    
   
    

    
        
            
        
    
`;

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=`dropdown item ${item.name}`;
        // add some event listener.
        option.addEventListener('click',()=>{
            dropdown.classList.remove('is-active');
        })
        // append child to parent div.
       resultsWrapper.appendChild(option)
        
    }
}

Proper way to manipulate innerHTML in JavaScript

Answers (1)

Related Questions