Переключатели с помощью функции

Question

Я новичок в javascript, и у меня есть крошечная проблема.

Я хочу создать функцию и нажав эту кнопку, чтобы инвертировать два divs (первый для второго и наоборот). Надеюсь, вы понимаете.

У меня есть этот код:

<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>

Мы просто storying содержимое каждого 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 перед первым, нажав кнопку инвертирования. Не требуется изменение или вытягивание внутреннего текста или 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>