Я столкнулся с небольшой проблемой. У меня есть:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="chart.css">
<script type="text/javascript" src="chart.js"></script>
<title>Chart</title>
</head>
<body>
<div id="lifespan-chart">
<div id="lifespan-chart-content"></div>
</div>
</body>
</html>
javascript:
class Polyline {
constructor(input) {
this.input = input;
this.nodes = this.convertNodes(input["nodes"]);
this.color = input["color"];
this.width = input["width"];
this.height = input["height"];
if (input["fill"] === undefined) {
this.fill = "";
} else {
this.fill = input["fill"];
}
if (input["stroke"] === undefined) {
this.stroke = "black";
} else {
this.stroke = input["stroke"];
}
if (input["stroke_width"] === undefined) {
this.stroke_width = "1.5";
} else {
this.stroke_width = input["stroke_width"];
}
// for (var key in input) {
// console.log(input[key]);
// }
}
changeParams(input) {
if ("nodes" in input) {
this.nodes = this.convertNodes(input["nodes"]);
}
if ("color" in input) {
this.color = input["color"];
}
if ("width" in input) {
this.width = input["width"];
}
if ("height" in input) {
this.height = input["height"];
}
if ("fill" in input) {
this.fill = input["fill"];
}
if ("stroke" in input) {
this.stroke = input["stroke"];
}
if ("stroke_width" in input) {
this.stroke_width = input["stroke_width"];
}
}
convertNodes(list) {
let result = "";
let i = 0;
while (i < list.length) {
result += list[i];
result += ",";
result += list[i+1];
result += " ";
i = i + 2;
}
return result;
}
setSvg() {
this.svg = `
<svg height='${this.height}', width='${this.width}'>
<polyline points='${this.nodes}', style='fill:${this.fill}, stroke:${this.stroke},stroke-width:${this.stroke_width}' />
</svg>
`;
//console.log(this.svg);
}
loadChart() {
var div = document.getElementById('lifespan-chart-content');
div.innerHTML = this.svg;
document.getElementById('lifespan-chart-content').appendChild(div);
}
}
window.addEventListener('load', function() {
input = {
"nodes" : [0,0,50,50,100,100,200,200,300,300,350,350,450,500,550,650],
"color" : "red",
"width" : 500,
"height": 300,
"fill" : "bisque",
"stroke" : "orange",
"stroke_width" : 2
};
p1 = new Polyline(input);
p1.setSvg();
p1.loadChart(); // ??? error on this place
})
И все в порядке, но когда я хочу добавить блок в html в функции loadChart вижу ошибку в консоли:
Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. at Polyline.loadChart. Что мне делать, чтобы избежать такой ошибки? Я прокомментировал место, где произошла ошибка. Заранее спасибо!
РЕДАКТИРОВАТЬ 1: Забыл выполнить setSvg до loadChart, я добавил его выше, теперь он dr aws ok, но ошибка все еще здесь. Это нормально?