如何在单击按钮时更改整个 div 内容

Question

我试图通过单击 div 内的按钮来更改 div 的内容。 div 包含几个按钮，在每次单击按钮时，我想显示一个带有文本的新 div，通过单击新 div，我想显示原始 div。

这是原始的div：

<div id="services" class="container-fluid text-center">
    <div class="col-sm-4">
        <button class="glyphicon glyphicon-heart logo-small"></button>
        <h4>blalala</h4>
        <p>blalala</p>
    </div>
</div>

我试图通过单击按钮而不是“服务”div 来显示不同的 div。

Answer 1

我希望这有帮助。
我们有一个div包含 3 个buttons ，每个button都有自己的文本值。
每次我们点击一​​个button我们都会创建一个新的div ，其中p保存我们点击的button的值。

 (function(){ function printButtons(){ // array to store the HTML output const output = []; // loop to get all the buttons myBtnsArr.forEach((button) => { let myBtn = `<button class="${button.class}" id="${button.id}"> ${button.content} </button>`; //print the results output.push(myBtn); buttonsDiv.innerHTML = output.join(''); }); } // the div we're going to print the buttons in it const buttonsDiv = document.getElementById('allBtns'); // all the buttons (in an array) const myBtnsArr = [ {class: 'myBtn', id: 'button1', content: 'button 1'}, {class: 'myBtn', id: 'button2', content: 'button 2'}, {class: 'myBtn', id: 'button3', content: 'button 3'} ]; // Run the function printButtons(); })(); // Get the button let myBtn1 = document.getElementById('button1'); let myBtn2 = document.getElementById('button2'); let myBtn3 = document.getElementById('button3'); let myDiv = document.getElementById('myDiv'); // Run the "createdNewDiv" function when clicking on the button, passing the text as an argument myBtn1.addEventListener('click', () => { let button1Text = "This is button 1 text"; createNewDiv(button1Text); }); myBtn2.addEventListener('click', () => { let button2Text = "This is button 2 text"; createNewDiv(button2Text); }); myBtn3.addEventListener('click', () => { let button3Text = "This is button 3 text"; createNewDiv(button3Text); }); // When calling the functuin.... function createNewDiv(text){ // 1- We create a new div let theNewDiv = document.createElement('div'); theNewDiv.classList.add('createdDiv'); // 2- We create a new pagaraph to hold the text we passed let thewNewPagaraph = document.createElement('p'); thewNewPagaraph.classList.add('createdParagraph'); thewNewPagaraph.innerHTML = text; // append the 'p' to the 'div' theNewDiv.appendChild(thewNewPagaraph); // append the new div to the original div myDiv.appendChild(theNewDiv); // when clicking on the new div we delete it, then we see the original div back. let createdDiv = document.querySelector('.createdDiv'); createdDiv.addEventListener('click', () => { createdDiv.remove(); }); }

 #myDiv { border: 1px solid; width: 400px; height: 200px; padding: 20px 0; text-align: center; position: relative; border-radius: 4px; } #allBtns { display: flex; justify-content: space-around; } .createdDiv { position: absolute; width: 100%; height: 100%; background-color: #ebebeb; border-radius: 4px; top: 0; left: 0; right: 0; bottom: 0; }

 <div id="myDiv"> <div id="allBtns"></div> <h4 id="myHeading">My h4</h4> <h4 id="myParagraph">My pagaraph</h4> </div>

Answer 2

您的问题在某些方面没有意义，但据我了解，此 JavaScript 函数将为您解决问题提供一些帮助。

function btnClick() {
    
    //adding some text to newly created div element
    var newDiv = document.createElement('div');
    newDiv.innerText = 'new Value';
    
    //if you want to display your div element  
    newDiv.style.dislpay = 'block';
    
    //If you want to access existing div element
    var originalDiv = document.querySelector('#original-div');
    
}