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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1169)

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

这就是我所拥有的:

<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 = Here should be div from param;
        }
</script>

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

提问于
用户回答回答于

2019年更新:

child.replaceWith(newElement);

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

在这个问题的具体情况下,我建议使用replaceWithOP希望交换的节点的克隆。这可能看起来像:

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

main.replaceWith(clone);

这可能会在您下次交换元素时出现问题,但您可以调整此解决方案以满足您的需求。

原帖:

我不是特别高兴我必须回答这个问题,因为之前的答案延续了不良做法,但是,我们走了。

最好的方法是使用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上使用内联事件处理程序也被认为是不好的做法; 关注点分离!

用户回答回答于

只需将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>

扫码关注云+社区

领取腾讯云代金券