Uncaught HierarchyRequestError: Fehler beim ‚insert‘ auf ‚Knoten‘ ausführen: Das neue Kind-Element enthält die Mutter

Question

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

Ich versuche einfach span9 vor span3 anhängen, wenn die Fenster Breite kleiner als 767, und ich habe diesen Fehler, warum Das?

$(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

Obwohl der Fehler tritt nicht auf, was Sie gezeigt haben, wird die Fehlermeldung ist ganz klar: Offenbar haben Sie mindestens ein Element mit der Klasse span3, die mit der Klasse content, wie diese innerhalb ein Element ist:

$(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>

Die Lösung ist Ihre Wähler mehr sorgfältig nur die Elemente, die Sie sich bewegen wollen Ziel. Anscheinend werden content und/oder span3 für andere Dinge verwendet und auch, wofür sie sie hier verwenden.

Zum Beispiel:

$(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>