Uncaught HierarchyRequestError: Не удалось выполнить «InsertBefore» на «Node»: Новый дочерний элемент содержит родителю

Question

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

Я просто пытаюсь добавить span9 до того span3, когда окна ширина меньше, чем 767, и у меня есть эта ошибка, почему что?

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

Хотя ошибка не происходит с тем, что вы показали, сообщение об ошибке вполне понятно: Судя по всему, у вас есть по крайней мере один элемент с классом span3 это внутри элемент с классом content, как это:

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

Решение более тщательно нацелить ваши селекторы на только элементы, которые вы хотите, чтобы передвигаться. Видимо, content и/или span3 используются для других целей, а также для того, что вы используете для них здесь.

Например:

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