inject a DIV container in the DOM with javascript

Question

I wonder how I create a container around elements in the DOM with javascript? I have had success with injecting DIVs straght in the html before, but need to target a couple elements and place them inside a container and unsure how to.

This is the html:

<div class="menubar">
  <div class="searching myClass yourClass"></div>
  <ul class="navVoordelen">
    <li></li>
    <li></li>
  </ul>
  <a class="navLogo"></a>
  <div class="langsel"></div>
  <a class="navLogin"></a>
  <a class="navLogin"></a>
  <a class="navLogin"></a>
  <ul class="newnav clearfix animated">
    <li></li>
    <li></li>
  </ul>
</div>

I need to place the container below the parent Menubar DIV and have it end before the second UL class. This is what i want it to looks like:

<div class="menubar">
  <div div="container">
    <div class="searching myClass yourClass"></div>
    <ul class="navVoordelen">
      <li></li>
      <li></li>
    </ul>
    <a class="navLogo"></a>
    <div class="langsel"></div>
    <a class="navLogin"></a>
    <a class="navLogin"></a>
    <a class="navLogin"></a>
  </div>
  <ul class="newnav clearfix animated">
    <li></li>
    <li></li>
  </ul>
</div>

Are you using any libs like `jquery` or `prototype` etc? Or just vanilla JS. Will make it easier to answer if we know this. :) — Jite, Feb 04 '15 at 08:02

score 1 · Answer 1 · answered Feb 04 '15 at 08:09

1

You can use the following code in javascript

var div = '<div class="container">';
var closediv = '</div>';
theParent =document.getElementsByClassName("menubar");
theParent.insertBefore(div, theParent.firstChild);

document.getElementsByClassName("menubar").appendChild(closediv);

answered Feb 04 '15 at 08:09

krunal nanda

235
1
12

1

No, you cannot append starting and closing tags that way. – Salman A Feb 04 '15 at 08:17

David Thomas · Accepted Answer · 2015-02-04T09:28:22.317

I'd suggest the following approach:

function wrapAllPrevious() {
  // this is assigned via the Function.prototype.call()
  // method, later:
  var _self = this,
      // creating a <div> element:
      div = document.createElement('div');
  // assigning an 'id' to that created-<div>:
  div.id = 'demo';

  // inserting the created-<div> before the _self/this
  // element, using insertBefore():
  _self.parentNode.insertBefore(div, _self);
  // while the created-<div> has a previousSibling:
  while (div.previousSibling) {
    // we insert that previous-sibling before firstChild
    // of the <div> (effectively prepending the element
    // to the created-<div>):
    div.insertBefore(div.previousSibling, div.firstChild);
  }
}

// calling the function, using (as noted earlier)
// Function.prototype.call() to assign the specified
// <ul> as the 'this' of the function (using
// document.querySelector() to return the specific node:
wrapAllPrevious.call(document.querySelector('ul.newnav.clearfix.animated'));

#demo {
  border: 2px solid #f00;
}

#demo::before {
  content: "Newly-added <div> element.";
}

<div class="menubar">
  <div class="searching myClass yourClass"></div>
  <ul class="navVoordelen">
    <li></li>
    <li></li>
  </ul>
  <a class="navLogo"></a>
  <div class="langsel"></div>
  <a class="navLogin"></a>
  <a class="navLogin"></a>
  <a class="navLogin"></a>
  <ul class="newnav clearfix animated">
    <li></li>
    <li></li>
  </ul>
</div>

References:

inject a DIV container in the DOM with javascript

2 Answers2