How to add <div> with javascript

Question

is it possible to add an HTML code to HTML with javascript.?

because I have this code, it generated automatically like this:

<div class="investi-announcements-summary" data-investi-date-format="dd MMM yyyy" data-investi-num-announcements="100" data-investi-filter-regex=".*presentation">
   <div>28 Jun 2021</div>
   <h4><a href="http://www.example.com" target="_blank">Investor Presentation - June 2021</a></h4>
</div>

And I want to add this code <div class="content"> before <div>28 Jun 2021</div> and this code </div> after <h4></h4>

so it'll be like this:

<div class="investi-announcements-summary" data-investi-date-format="dd MMM yyyy" data-investi-num-announcements="100" data-investi-filter-regex=".*presentation">
   <div class="content">
     <div>28 Jun 2021</div>
       <h4><a href="http://www.example.com" target="_blank">Investor Presentation - June 2021</a></h4>
   </div>
</div>

if it's possible, I hope someone can help me on that.

Thank you,

Spectric · Accepted Answer · 2021-07-09 02:57:03Z

Yes, it's possible. In this particular example you can replace innerHTML of outer div.investi-announcements-summary with newly created div:

const box = document.querySelector(".investi-announcements-summary"),
      newDiv = document.createElement("div");

newDiv.className = "content";

/* copy content of original div */
newDiv.innerHTML = box.innerHTML;

/* replace content of original div with new div */
box.innerHTML = newDiv.outerHTML;

document.getElementById("res").value = box.outerHTML;

body
{
  height: 100vh;
}

<div class="investi-announcements-summary" data-investi-date-format="dd MMM yyyy" data-investi-num-announcements="100" data-investi-filter-regex=".*presentation">
   <div>28 Jun 2021</div>
   <h4><a href="http://www.example.com" target="_blank">Investor Presentation - June 2021</a></h4>
</div>

<textarea id="res" readonly="true" style="width: 100%; height: 50%"></textarea>

But you should check out some tutorials on how to add/replace DOM elements

webapace · Accepted Answer · 2021-07-09 03:23:47Z

1

const mainEl = document.querySelector('.investi-announcements-summary')

let contentEl = document.createElement('div')
contentEl.classList.add('content')

for (let child of mainEl.children) contentEl.appendChild(child.cloneNode(true))

mainEl.innerHTML = ''
mainEl.appendChild(contentEl)

<div class="investi-announcements-summary" data-investi-date-format="dd MMM yyyy" data-investi-num-announcements="100" data-investi-filter-regex=".*presentation">
   <div>28 Jun 2021</div>
   <h4><a href="http://www.example.com" target="_blank">Investor Presentation - June 2021</a></h4>
</div>

answered Jul 9, 2021 at 3:23

webapace

3612 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to add <div> with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related