CODEWITHSUNDEEP
htmlinserthtml
Diana Galindo
Diana Galindo

Reputation: 23

Using Element.insertAdjacentHTML to add 'Blocks' of HTML

I'm trying to insert the following 'block' of HTML using Element.insertAdjacentHTML()

<div class="content-wrapper">
  <ul>
   <li class="go-back-environment">
    <a href="/environment">
     <p>Back to Environment</p>
    </a>
   </li>
   <li class="back-home">
    <a href="/home">
     <p>Back to home</p>
    </a>
  </li>
 </ul>
</div>

However, I'm not sure it is possible to add divs with classes and lists. I've been trying to find (unsuccessfully) articles with examples where more than one 'p' or 'span' was added. I started with the following but I don't know how to continue building:

var footer = document.getElementById ('environment'); footer.insertAdjacentHTML('afterend','')

I tried the following:

 <script>
    var footer = document.getElementById ('environment');
    footer.insertAdjacentHTML('afterend', 
    '<div class="content-wrapper">
      <ul>
       <li class="go-back-environment">
        <a href="/environment">
         <p>Back to Environment</p>
        </a>
       </li>
       <li class="back-home">
        <a href="/home">
         <p>Back to home</p>
        </a>
      </li>
     </ul>
    </div> ');
  </script>

Is it even possible ?

Thanks !

Upvotes: 0

Views: 962

Answers (2)

Kiran Shinde
Kiran Shinde

Reputation: 5982

Looks like you have done some mistake in string

Check for this

var footer = document.getElementById('environment');

var appendHtml = ['<div class="content-wrapper">',
    '<ul>',
    '<li class = "go-back-environment">',
    '<a href = "/environment">',
    '<p> Back to Environment </p>',
    '</a>',
    '</li>',
    '<li class = "back-home">',
    '<a href = "/home">',
    '<p> Back to home </p>',
    '</a>',
    '</li>',
    '</ul>', 
    '</div>'].join("");
footer.insertAdjacentHTML('afterend', appendHtml);
<div id=environment>Footer Div</div>

Upvotes: 0

Daniel Sixl
Daniel Sixl

Reputation: 2499

Yes, it is. Try using template literals for longer html strings:

var footer = document.getElementById('footer');

var html = `
<div class="content-wrapper">
  <ul>
   <li class="go-back-environment">
    <a href="/environment">
     <p>Back to Environment</p>
    </a>
   </li>
   <li class="back-home">
    <a href="/home">
     <p>Back to home</p>
    </a>
  </li>
 </ul>
</div> 
`;

footer.insertAdjacentHTML('afterend', html);
<main>Main</main>
<footer id="footer">Footer</footer>

Upvotes: 1

Related Questions