39,118
社区成员
发帖
与我相关
我的任务
分享jQuery操作DOM Failed to execute 'appendChild' on 'Node': The new child element con
这是我写的一个2048程序，用jQuery操作节点报错实在不知道是什么原因
错误信息如下：
关键代码如下：
错误信息如下：
Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (http://localhost:63342/2048/js/jquery-3.1.1.js:5921:12)
at domManip (http://localhost:63342/2048/js/jquery-3.1.1.js:5759:14)
at jQuery.fn.init.append (http://localhost:63342/2048/js/jquery-3.1.1.js:5918:10)
at new Cell (http://localhost:63342/2048/index.html:79:32)
at HTMLDocument.<anonymous> (http://localhost:63342/2048/index.html:26:37)
at mightThrow (http://localhost:63342/2048/js/jquery-3.1.1.js:3570:29)
at process (http://localhost:63342/2048/js/jquery-3.1.1.js:3638:12)关键代码如下：
$(function () {
debugger;
// 方块距离边的宽度
var MARGIN = 5;
// 方块大小
var CELL_SIZE = 96.25;
// 方块单位
var PX = "px";
// ini
var cells = new Array();
for (var i = 0; i < 4; i++) {
cells[i] = new Array();
}
var rand = randomPoint();
cells[rand.x][rand.y] = new Cell(rand.x, rand.y);
console.log("rand.x:" + rand.x + "rand.y:" + rand.y);
// for (var i = 0; i < 2; i++) {
// var rand = randomPoint();
// new Cell(rand.x, rand.y);
// console.log("rand.x:" + rand.x + "rand.y:" + rand.y);
// }
$(document).key(function (event) {
// up 38
if (event.keyCode == 38) {
toUp();
}
// down 40
if (event.keyCode == 40) {
toDown();
}
// left 37
if (event.keyCode == 37) {
toDown();
}
// right 39
if (event.keyCode == 39) {
toDown();
}
});
/**
* Cell 对象代表一个格子
* @param x
* @param y
* @constructor
*/
function Cell(x, y) {
var MARGIN_TOP = "margin-top";
var MARGIN_LEFT = "margin-left";
var INIT_NUMBER = (random(2) + 1) * 2;
var BACKGROUND_COLOR = "background-color";
console.log("INIT_NUMBER", INIT_NUMBER);
//
this.x = x;
this.y = y;
this.number = INIT_NUMBER;
this.color = getColor(this.number);
this.marginTop = (MARGIN + CELL_SIZE * this.x) + PX;
this.marginLeft = (MARGIN + CELL_SIZE * this.y) + PX;
var cell = $('div');
cell.addClass('cell');
cell.css(MARGIN_TOP, this.marginTop);
cell.css(MARGIN_LEFT, this.marginLeft);
cell.css(BACKGROUND_COLOR, this.color);
$('#cell-box').append(cell);
this.top = function () {
}
this.down = function () {
}
this.left = function () {
}
this.right = function () {
}
}
function getColor(number) {
var index = getBaseLog(2, number);
console.log("index", index);
this.arr = new Array();
this.arr[1] = '#eee4da'; // 2
this.arr[2] = '#ede0c8'; // 4
this.arr[3] = '#f2b179'; // 8
this.arr[4] = '#f59563'; // 16
this.arr[5] = '#f67c5f'; // 32
this.arr[6] = '#f65e3b'; // 64
this.arr[7] = '#edcf72'; // 128
this.arr[8] = '#edcc61'; // 256
this.arr[9] = '#edc850'; // 512
this.arr[10] = '#edc53f'; // 1024
this.arr[11] = '#EDC503'; // 2048
this.arr[12] = '#b6ed00'; // 4096
this.arr[13] = '#21ed00'; // 8192
this.arr[14] = '#00ed97'; // 16384
this.arr[15] = '#00edda'; // 32768
this.arr[16] = '#0090ed'; // 65536
for (var i = 1; i <= arr.length; i++) {
if (index == i) {
console.log("return arr[i];" + arr[i]);
return arr[i];
}
}
}
function randomPoint() {
this.x = random(4);
this.y = random(4);
return this;
}
});
/**
* 下面的函数返回以 n 为底 m 的对数（既logx y）：
*/
function getBaseLog(n, m) {
return Math.log(m) / Math.log(n);
}
/**
* 返回 0~range 的随机数
* @param range
* @returns {Number}
*/
function random(range) {
return parseInt(Math.random() * range, 10);
} body {
text-align: center;
}
div {
display: inline-block;
}
.box {
margin: 0 auto;
background-color: #F9F9EE;
width: 450px;
height: 500px;
}
.cell-box {
width: 410px;
height: 410px;
margin-top: 90px;
background-color: #BBADA0;
}
.cell {
width: 96.25px;
height: 96.25px;
/*background-color: yellow;*/
float: left;
}
<div class="box">
<div class="cell-box" id="cell-box">
</div>
</div>
...全文
请发表友善的回复…
发表回复
qq_26408085 2018-11-30
- 打赏
- 举报
我也出现了这个错误：
这是html中的元素：
<div class="box">
<div class="inner"></div>
</div>
这是我要追加的元素：
<div class="addEle">
<div class="inner"></div>
</div>
这是jquery代码：
var box=$(".box");
var addEle=$("addEle");
box.find(".inner").apend(addEle);
关键在最后一句：box.find(".inner").apend(addEle);
通过box元素选择它下面的inner，然后将addEle元素追加到inner里面。
这里有个问题，当find(".inner")时，不仅将box中原来的inner找到了，还找到了将要追加的addEle中的inner（这里是重点，具体视怎么回事，我也不清楚）
这时，上面的语句就是：将addEle添加到addEle下的inner，而新添加的addEle又有inner，于是又将addEle添加到addEle下的inner，而新添加的addEle又有inner，形成了一个死循环。
相当于：inner(addEle(inner(addEle(inner(addEle(inner()))))
孟子E章 2017-03-16
- 打赏
- 举报
var cell = $('div');
$('#cell-box').append(cell);
这2行有问题
$('div')包含了所有的div标签，也包括$('#cell-box')，所以这样的错误的。
你可以改成 $('<div/>')新建标签，或者根据你的实际情况修改成别的，总之不能嵌套、、
SuperLGX 2017-03-16
- 打赏
- 举报
自己顶贴
SuperLGX 2017-03-16
- 打赏
- 举报
没有意识到这里，谢谢
