Question

如何用javascript中的另一个div替换div？

这就是我所拥有的：

where

甚至可以在没有jquery的情况下完成它吗？

Answer 1

将字符串传递给您的方法并获取另一个div

＆＃13;

<div id="main_place">
  main
</div>

<button onclick="show('operation1')">Replace to operation 1</button>
<button onclick="show('operation2')">Replace to operation 2</button>
<button onclick="show('operation3')">Replace to operation 3</button>


<div id=operation1 style=“display:none”>
  Some textboxes and text
</div>

<div id=operation2 style=“display:none”>
  Again some textboxes and text
</div>

<div id=operation3 style=“display:none”>
  And again some textboxes and text
</div>

<script>
  function show(param_div_id) {
    document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).innerHTML;
  }
</script>

＆＃13;

Answer 2

2019更新：

child.replaceWith(newElement);

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

在这个问题的特定情况下，我建议使用replaceWith与OP希望交换的节点的克隆。这可能看起来像：

const main = document.getElementById('main');
const original = document.getElementByid('operation1');
const clone = original.cloneNode(true);

main.replaceWith(clone);

这可能会在您下次交换元素时出现问题，但您可以根据自己的需要调整此解决方案。

原帖：

我不是特别高兴我必须回答这个问题，因为之前的答案使不良做法永久化，但是，我们走了。

由于possible unforseen side effects，最好的方法是不使用innerHTML。最好的方法是：

首先克隆所需的div
第二次清空主要的div
第三个将克隆添加到主div

这看起来非常像以下内容：

function swapContent (id) {
    const main = document.getElementById('main');
    const div = document.getElementById(id);
    const clone = div.cloneNode(true);

    while (main.firstChild) main.firstChild.remove();

    main.appendChild(clone);
}

不要让自己陷入使用innerHTML的许多陷阱;克隆一个节点有更好的机会完成你期望它做的事情。

innerHTML的一些问题是它只复制HTML而不是DOM，这意味着你不复制那个DOM节点上的任何东西，比如事件监听器，属性（比如值）等等克隆一个节点（及其子节点）克隆该DOM节点，该节点分别克隆其属性。

在HTML上使用内联事件处理程序（大多数情况下）也被认为是不好的做法;分离关注点！

Answer 3

我使用此表格替换了我的div。

<div id="newDiv" class="here" style="display: none" > content</div>
<div id="oldDiv" class="here" style="display: block"> content</div>
<button type="button" onclick="newDivHere()">replace</button>

和JS：

function newDivHere() {
document.getElementById("oldDiv").style.display="none";
document.getElementById("newDiv").style.display="block";
}

Answer 4

只需将HTML内容分配给字符串（手动编写或从其他html元素（模板）中提取）：

window.onload = function() {
  document.getElementById("to_be_replaced").innerHTML = "<span> My Production Text </span>";
}

div > span {
  font-weigth: bold;
  color: red;
  }

<div id="to_be_replaced">
  Lorem ipsum...
</div>

Answer 5

像这样编辑你的javascript：

function show(param_div_id){
    document.getElementById('main_place').innerHTML = document.getElementById(param_div_id).textContent;
}

另外，将您的参数放在单引号中，如下所示：

<button onclick="show('operation1')">

Answer 6

我认为ndugger是对的，你应该使用像删除/冒号或jquery .remove（）和append（）而不是innerhtml。

根据stackoverflow和其他网站中的这个问题总是更好地使用append（）而不是html（）或innerHTML。

"innerHTML += ..." vs "appendChild(txtNode)"

你的代码可以是这样的。

        function swapContent(id) {
            const main = document.getElementById('main_place');
            const div = document.getElementById(id);
            const clone = div.cloneNode(true);

            while (main.firstChild) main.firstChild.remove();

            main.appendChild(clone);
        }

    <div id="main_place">
        main
    </div>

    <button onclick="swapContent('operation1')">Replace to operation 1</button>
    <button onclick="swapContent('operation2')">Replace to operation 2</button>
    <button onclick="swapContent('operation3')">Replace to operation 3</button>

    <div id="complete" style="display:none;">
        <div id="operation1">
            Some textboxes and text
        </div>

        <div id="operation2">
            Again some textboxes and text
        </div>

        <div id="operation3">
            And again some textboxes and text
        </div>
    </div>

你也可以使用

document.getElementById("idOfDIv").addEventListener("click", function () {
    yourfunction();
    secondfunction();
})

或者

document.getElementById("idOfDIv").onclick = yourfunction();

而不是内部HTML onclick事件属性

如何用javascript中的另一个div替换div？

6 个答案: