Interchnage the children of two divs using a button-CodePudding

My document structure is:

<div id="mainWindow">
    <div id="subele1"></div>
</div>

<div id="subWindow">
    <div id="subele2"></div>
</div>

I want to create a button so that the children subele1 and subele2 are interchanged every time the button is clicked.

CodePudding user response：

Do you mean smth like this?

function handleButtonClicked(type) {

  if (type === 'main') {
    const mainElement = document.getElementById('subele1')
    mainElement.innerHTML  = '!'
  }

  if (type === 'sub') {
    const mainElement = document.getElementById('subele2')
    mainElement.innerHTML  = '?'
  }
}

<div id="mainWindow">
  <div id="subele1">main Window!</div>
</div>

<div id="subWindow">
  <div id="subele2">sub Window?</div>
</div>

<button id='main' onclick={handleButtonClicked('main')}>main</button>
<button id='sub' onclick={handleButtonClicked('sub')}>sub</button>

CodePudding user response：

why not just interchange the class names ? or change the grid view (more recommended) ? if youre point is to flip the webpage, theres many ways to do this without such a heavy approach.