使用功能翻转div

Question

我是javascript新手，但有一个小问题。

我想创建一个函数，然后按该按钮以反转两个div（将第一个div放置在第二个div上，反之亦然）。 我希望你明白。

我有以下代码：

 <div> text 1 </div> <div> text 2 </div> <button> invert </button> 

Answer 1

使用纯JavaScript，您只需切换每个div的内容即可：

 function flip(){ div1_content = document.getElementById("div1").innerHTML; div2_content = document.getElementById("div2").innerHTML; document.getElementById("div1").innerHTML = div2_content; document.getElementById("div2").innerHTML = div1_content; } 

 <div id="div1"> Text 1 </div> <div id="div2"> Text 2 </div> <button onclick="flip()"> Flip it! </button> 

我们只是在讲述每个div的内容，然后将它们彼此分配。 希望您可以接受，学习并按照自己的意愿进行应用。

Answer 2

这是一个简单的javascript解决方案

jsFiddle https://jsfiddle.net/xzLme043/2/

myFunction = function(){
    var div1 = document.getElementById('one');
    var div2 = document.getElementById('two');

    var html = div1.innerHTML;
    div1.innerHTML = div2.innerHTML;
    div2.innerHTML = html;
};

Answer 3

对于此解决方案，您只需将当前的两个div放置在另一个父div容器中，然后在单击反转按钮的情况下，将第二个div插入第一个div之前。 无需更改或提取内部文本或HTML。

 function invertDivs(parentDiv) { var first = document.getElementById(parentDiv).firstElementChild; console.log(first); var second = document.getElementById(parentDiv).lastElementChild; console.log(second); document.getElementById(parentDiv).insertBefore(second, first); } 

 <div id="parent"> <div id="first">div 1</div> <div id="second">div 2</div> </div> <button onclick="invertDivs('parent');">invert</button>