Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent

Question

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

I just try to append span9 before span3 when windows width is less than 767 and I have this error, why is that?

$(document).ready(function() {
  // Optimalisation: Store the references outside the event handler:
  var $window = $(window);
  var $content = $('.content');
  var $cats = $('.span3');

  function checkWidth() {
      var windowsize = $window.width();
      if (windowsize < 767) {
        $content.insertBefore($cats);
      } else if (windowsize > 767) {
        $content.insertAfter($cats);
      }
    }
    // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="content-entry">
  <div class="row">
    <div class="span3">span3</div>
    <div class="span9 content">span9/content</div>
  </div>
</div>

Answer 1

Although the error doesn't occur with what you've shown, the error message is quite clear: Apparently, you have at least one element with the class span3 that's inside an element with the class content, like this:

$(document).ready(function() {
  // Optimalisation: Store the references outside the event handler:
  var $window = $(window);
  var $content = $('.content');
  var $cats = $('.span3');

  function checkWidth() {
      var windowsize = $window.width();
      if (windowsize < 767) {
        $content.insertBefore($cats);
      } else if (windowsize > 767) {
        $content.insertAfter($cats);
      }
    }
    // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});

<div class=".content-entry">
  <div class="row">
    <div class="content"><!-- Note this new element -->
        <div class="span3">span3</div>
    </div>
    <div class="span9 content">span9</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

The solution is to target your selectors more carefully at just the elements you want to move around. Apparently content and/or span3 are used for other things as well as what you're using them for here.

For instance:

$(document).ready(function() {
  // Optimalisation: Store the references outside the event handler:
  var $window = $(window);
  var $content = $('.move-this');     // Changed the class
  var $cats = $('.relative-to-this'); // Changed the class

  function checkWidth() {
      var windowsize = $window.width();
      if (windowsize < 767) {
        $content.insertBefore($cats);
      } else if (windowsize > 767) {
        $content.insertAfter($cats);
      }
    }
    // Execute on load
  checkWidth();
  // Bind event listener
  $(window).resize(checkWidth);
});

<div class=".content-entry">
  <div class="row">
    <div class="content"><!-- Note this new element -->
        <div class="span3 relative-to-this">span3</div><!-- Added a class -->
    </div>
    <div class="span9 content move-this">span9</div><!-- Added a class -->
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>