admin管理员组文章数量:1324931
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=".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>
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./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>
Share
Improve this question
edited Jun 6, 2016 at 8:17
T.J. Crowder
1.1m200 gold badges2k silver badges1.9k bronze badges
asked Jun 6, 2016 at 7:47
Rav_gRav_g
1231 gold badge2 silver badges13 bronze badges
5
- With the code and markup in the question, that error doesn't occur. So clearly there's more markup (which isn't surprising). – T.J. Crowder Commented Jun 6, 2016 at 7:53
- Does not seems to throw error. Can you create Snippet with issue? – Justinas Commented Jun 6, 2016 at 7:53
-
Side note: Look at your
checkWidth
function and ask yourself what it does if the width is exactly 767. ;-) – T.J. Crowder Commented Jun 6, 2016 at 7:53 - Add snippet and yes there no error :( – Rav_g Commented Jun 6, 2016 at 8:11
-
"I just try to append
span9
beforespan3
when windowswidt
h isless then 767
and i have this error why is that ?" Please don't randomly mark up non-code as code (much less marking up part of a word as code). (I've fixed it for you.) – T.J. Crowder Commented Jun 6, 2016 at 8:16
1 Answer
Reset to default 2Although 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./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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
本文标签:
版权声明:本文标题:javascript - Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742117154a2421519.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论