Inserting an empty div after main div

Question

I am editing our cookie policy banner but the banner is created all through JS so I can really add any HTML unless I add it in with JS.

Basically what is generated is as follows

<div id="cookieChoiceInfo">
<span>This is the text explaining the cookie policy</span>
<span><a href="#">Okay</a></span>
</div>

What I would like to do is include another div after the main div - so something like an inner div.

This is the main part of the JS which generates that outer div

var cookieChoices = (function() {
    var cookieName = 'displayCookieConsent';
    var cookieConsentId = 'cookieChoiceInfo';
    var dismissLinkId = 'cookieChoiceDismiss';

function _createHeaderElement(cookieText, dismissText, linkText, linkHref) {

      var butterBarStyles = 'position:fixed;background-color:#eee;' +
            'margin:0; top:0;padding:15px;z-index:1000;text-align:center;';

      var cookieConsentElement = document.createElement('div');
      cookieConsentElement.id = cookieConsentId;
      cookieConsentElement.style.cssText = butterBarStyles;
      cookieConsentElement.appendChild(_createConsentText(cookieText));

      if (!!linkText && !!linkHref) {
        cookieConsentElement.appendChild(_createInformationLink(linkText, linkHref));
      }
      cookieConsentElement.appendChild(_createDismissLink(dismissText));
      return cookieConsentElement;
    }

Any help would be much appreciated.

Thanks in advance.

score 1 · Accepted Answer · answered Jun 12 '18 at 13:21

I assume you want the div as a child of cookieChoiceInfo:

var innerDiv = document.createElement('div');
// innerDiv.id = ...;
// innerDiv.style.cssText = ...;
cookieConsentElement.appendChild(innerDiv);

If you actually want it after the div then:

cookieConsentElement.parentNode.insertBefore(innerDiv, cookieConsentElement.nextSibling);

Inserting an empty div after main div

1 Answers1