使用函数翻转 div答案

【问题标题】：Flip divs using a function使用函数翻转 div
【发布时间】：2015-07-28 16:24:50
【问题描述】：

我是 javascript 新手，遇到了一个小问题。

我想创建一个函数并通过按下该按钮来反转两个 div（第一个放置在第二个，反之亦然）。我希望你明白。

我有这个代码：

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

【问题讨论】：

到目前为止你有什么 javascript？
你想要“创建一个函数”？或者你想让其他人“创建一个函数”？
好吧，我知道代码不包含javascript，这就是为什么我想创建一个javascript函数。那是我唯一的代码。我尝试了反向，但它似乎不起作用
韦斯，我只是想要一个提示，我没有请人来创建它。正如我所说，我正在努力学习。我已经完成了一些功能，但这一个有点让我烦恼。
谢谢大家的回答。我会尝试每一个例子

标签： javascript function

【解决方案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 的内容进行报道，然后将它们分配给另一个。希望你能接受这一点，从中学习，并按照你的意图应用它。

【讨论】：

非常感谢。我会的。
没问题。如果有帮助，请务必接受答案！

【解决方案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;
};

【讨论】：

这是 jQuery。他正在寻找 javascript
更短更快，因为它不会两次查询 DOM。
@GoneCoding 每次使用选择器时 jQuery 都会查询 DOM 吗？它不会尝试以任何方式减少它？
@Abdul：将选择器结果缓存到 jQuery 中的局部变量。它不会在内部缓存它。 ID 查找速度快如闪电，但您仍然不希望在处理器密集型操作中产生解析开销。

【解决方案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>

【讨论】：

谢谢。我也会试试这个例子。