javascript-单击按钮时将一个div（动态创建）替换为另一个div（动态创建）答案

【问题标题】：javascript-Replace one div(created dynamically) with other div(created dynamically) on click of buttonjavascript-单击按钮时将一个div（动态创建）替换为另一个div（动态创建）
【发布时间】：2017-07-19 01:59:20
【问题描述】：

我有 动态创建的按钮，假设创建了 5 个按钮 button1、button2、button3、button4、button5。当我点击某个按钮（比如说，button1）时，会创建一个 div（比如说 div1）。当我点击其他按钮（比如 button2）时，会创建另一个 div（比如 div2）。我想一次显示一个。也就是说，当我点击 button1 时，应该显示 div1 而其余的 div 不应该显示。但是在我的代码中，当我单击 button1 时，会创建 div1。当我点击 button2 div2 被附加。我想用 div1 替换 div2。

我也尝试过使用 replaceWith() 并检查 siblings。但它没有奏效。

这是我的代码：

javascript：

$(document).ready(function(){
var request = $.ajax({'url': '/FunctionName'}); 
request.done(function(response) 
 {
    var output = document.getElementById('output');
    response = JSON.parse(response)
    response.forEach(function(item){
    var button = document.createElement("input");
button.type = "button";
button.value = item[0];
button.name= item[0];
button.onclick = createDiv; 
output.appendChild(button);


   function createDiv() {
        var div = document.createElement('div');
        div.setAttribute("id", item[0]);
        div.setAttribute("class","inner");
    div.innerHTML = item[1];
    showDiv.appendChild(div);
   }

});
 });
 request.fail(function(jqXHR, textStatus) 
 {
   alert('Request failed: ' + textStatus);
 });


 });

HTML：

<div id="regex_1" class="tab-pane fade">
    <div id="output" class="panel panel-default" style="float:left; width: 30%" >
    </div>
    <div id="showDiv" class="panel panel-default" style="float:left; width: 70%" >
    </div>
</div>

【问题讨论】：

删除 ajax 代码并添加一些不同的东西。 ajax 在这里无法正常工作。
在追加之前，清除那个 html。
@santosh gore ，清除 html 对我有用，但每次创建新 div 时。有没有办法只替换文本？例如，如果没有 div，则创建 div。如果 div 已经存在，请在单击按钮时替换 div 内的文本。

标签： javascript jquery html

【解决方案1】：

这是一个简单的替换 div 代码。你的期望是什么？

$(".buttonShowDiv").on("click", function(){
  $("#mainDiv .replaceDiv").replaceWith($(this).closest("div").find(".replaceDiv").clone());
  $("#mainDiv .replaceDiv").show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="div1 replaceDiv" hidden="hidden">
    <p>This is div 1</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 1"/>
</div>
<div>
  <div class="div2 replaceDiv" hidden="hidden">
    <p>This is div 2</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 2"/>
</div>
<div id="mainDiv">
  <div class="replaceDiv">
    <p>This is default div</p>
  </div>
</div>

【讨论】：

【解决方案2】：

向您的 div 添加一个类，例如“alldivs”。

因此，除了您正在创建的 div 之外，您的所有 div 都将被隐藏。

function createDiv() {
    var alldives=document.getElementsByClassName('alldivs');
    alldivs.display='none';
    var div = document.createElement('div');
    div.setAttribute("id", item[0]);
    div.setAttribute("class","inner alldivs");
    div.innerHTML = item[1];
    showDiv.appendChild(div);

}

这样你可以隐藏你之前创建的所有其他 div 并且只显示给当前的。

【讨论】：