CODEWITHSUNDEEP
javascript
user3486427
user3486427

Reputation: 474

insertAdjacentHTML not inserting passed string correctly

I want to insert html after a particular element but insertAdjacentHTML wont let me add a closing tag first.

If I do 

elm.insertAdjacentHTML('afterend', '</div><section class="block">');

the expected result is

 <element></element></div><section class="block">

the result it's returning 

 <element></element><section class="block"></div>

Is there a way around this?

Edit:

Basically what i'm trying to do is loop through each element and split them into two divs

 <div class="column">
     <div class="block">block 1</div>
     <div class="block">block 2</div>
     <div class="block">block 3</div>
     <div class="block">block 4</div>
     <div class="block">block 5</div>
     <div class="block">block 6</div>
     <div class="block">block 7</div>
     <div class="block">block 8</div>
 </div>

Expected result 

 <div class="column">
     <div class="block">block 1</div>
     <div class="block">block 2</div>
     <div class="block">block 3</div>
     <div class="block">block 4</div>
</div>
<div class="column">
     <div class="block">block 5</div>
     <div class="block">block 6</div>
     <div class="block">block 7</div>
     <div class="block">block 8</div>
 </div>

JS

const blocks = document.querySelectorAll(".block");
    let half = Math.ceil(blocks.length / 2 - 1);
    blocks[half].insertAdjacentHTML('afterend', '</div><div class="column">');

Upvotes: 0

Views: 1081

Answers (1)

connexo
connexo

Reputation: 56823

If I get your requirement right, this is what you want to do:

elm.parentNode.insertAdjacentHTML('afterend', '<section class="block"></section>');

If the div is not the direct parent element, you might want to use Element.closest(selector) instead:

elm.closest('div.myDiv').insertAdjacentHTML('afterend', '<section class="block"></section>');

update

You have elaborated on your requirements further, this is how to do it in Javascript:

const blocks = [...document.querySelectorAll('.block')];

const middle = Math.ceil(blocks.length / 2 - 1);

const column = document.querySelector('.column');

const parent = document.querySelector('.parent');

const col1 = document.createElement('div');
col1.className = 'column';
const col2 = document.createElement('div');
col2.className = 'column';

blocks.forEach((block, index) => {
  if (index <= middle) {
    col1.appendChild(block)
  } else {
    col2.appendChild(block)
  }
})

parent.removeChild(column)
parent.appendChild(col1);
parent.appendChild(col2);
.column+.column {
  color: green;
}
<div class="parent">
  <div class="column">
    <div class="block">block 1</div>
    <div class="block">block 2</div>
    <div class="block">block 3</div>
    <div class="block">block 4</div>
    <div class="block">block 5</div>
    <div class="block">block 6</div>
    <div class="block">block 7</div>
    <div class="block">block 8</div>
  </div>
</div>

Resulting DOM:

Resulting DOM

Upvotes: 1

Related Questions