How to modify a child only if a certain sibling exists?-CodePudding

Going by the attached code, I am trying to have the sibling elements, where they exist, move to a different position, namely inside the related child, within their parent. So that once the button is clicked, all siblings will move to be inside their related children.

I've previously gotten the moving of the element to work, but that made it so that the siblings would move to a previous parent if their parent didn't have any relevant children, meaning that all the siblings would cluster together in all the top parents and not their corresponding parent. Hope that makes sense...

function appendSibling() {
  console.log("appendSibling()");
  var parents = document.getElementsByClassName('parent');
  var siblings = document.getElementsByClassName('sibling');
  var children = document.getElementsByClassName('child');

  for (var i = 0; i < parents.length;   i) {
    if (parents[i].querySelector('.sibling')) {
      parents[i].querySelector('.child').insertAdjacentHTML('afterbegin', parents[i].querySelector('.sibling'));
    }
  }
}

  .parent {
  position: relative;
  background-color: grey;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: orange;
  width: 30px;
  height: 10px;
}

.sibling {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: blue;
  width: 30px;
  height: 10px;
  font-size: 10px;
  color: white;
}

.button {
  width: 30px;
  height: 30px;
  background-color: red;

<div >
  <div >Num 1
  </div>
  <div >
  </div>
</div>
<div >
  <div >
  </div>
</div>
<div >
  <div >Num 2
  </div>
  <div >
  </div>
</div>
<button  onclick="appendSibling()">
</button>

CodePudding user response：

Using insertAdjacentElement (position argument):

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement?retiredLocale=it

'beforebegin': Before the targetElement itself.

'afterbegin': Just inside the targetElement, before its first child.

'beforeend': Just inside the targetElement, after its last child.

'afterend': After the targetElement itself.

Inverting the position of .child and .sibling in their .parent:

If you meant to invert the position of .child and .sibling elements inside their .parent, it was correct to use afterend like this:

const destination = parents[i].querySelector('.child');
const elementToMove = parents[i].querySelector('.sibling');
destination.insertAdjacentElement('afterend', elementToMove);

Of course in your snippet your styles position the element in absolute way. So you won't see any difference in the viewport but if you inspect the elements you'll see that now the .sibling element will be next to the .child element after clicking the button that performs the transformation.

Moving .sibling inside the .child of the same .parent:

It wasn't clear at first in the question, but it seems you wished instead to move the .sibling element inside the .child of the same .parent.

In that case beforeend was more appropriate:

const destination = parents[i].querySelector('.child');
const elementToMove = parents[i].querySelector('.sibling');
destination.insertAdjacentElement('beforeend', elementToMove);

Demo working with the second approach:

function appendSibling() {
  console.log("appendSibling()");
  var parents = document.getElementsByClassName('parent');
  var siblings = document.getElementsByClassName('sibling');
  var children = document.getElementsByClassName('child');

  for (var i = 0; i < parents.length;   i) {
    if (parents[i].querySelector('.sibling')) {
      const destination = parents[i].querySelector('.child');
      const elementToMove = parents[i].querySelector('.sibling');
      destination.insertAdjacentElement('beforeend', elementToMove);
    }
  }
}

.parent {
  position: relative;
  background-color: grey;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: orange;
  width: 30px;
  height: 10px;
}

.sibling {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: blue;
  width: 30px;
  height: 10px;
  font-size: 10px;
  color: white;
}

.button {
  width: 30px;
  height: 30px;
  background-color: red;

<div >
  <div >Num 1
  </div>
  <div >
  </div>
</div>
<div >
  <div >
  </div>
</div>
<div >
  <div >Num 2
  </div>
  <div >
  </div>
</div>

<button  onclick="appendSibling()">
</button>