时间戳

首页 > 解决方案 > 在 JavaScript 中操作 innerHTML 的正确方法

javascript - 在 JavaScript 中操作 innerHTML 的正确方法

问题描述

我最近学习了 JavaScript，对它不是很熟悉。我设法制作了这个古怪的网站。我希望左侧的这些按钮可以更改与其相邻的面板的内容。

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

这就是我用来更改左侧面板内容的方法。我真的不知道该怎么做，所以我只是复制了我想要进去的 HTML 代码并将它放在 innerHTML 中。

这对我来说似乎真的很乱，我不认为将 HTML 代码放入 JavaScript 是最好的方法，但我又不知道。

有没有办法以更好的方式做到这一点？

谢谢你。

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>`;

}

更新： 感谢您的回复。我认为使用循环来附加元素会使这有点困难，但是我真的不知道那会是什么样子，我只是想知道这是否是常用的东西，即使它不是最好的这样做的方法，或者它是一种邪恶的可憎之物，在这种情况下，我将不得不修复它。我感谢所有的帮助。:)

标签： javascripthtml

解决方案

您可以动态创建元素，然后通过传递自定义参数将其附加到函数内的父元素上。

例子：

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)
        
    }
}

推荐阅读