title: The new child element contains the parent JS error
body: <p>I encountered a little problem. I have:</p>
  <p><code>html</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;chart.css&quot;&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;chart.js&quot;&gt;&lt;/script&gt;
      &lt;title&gt;Chart&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;lifespan-chart&quot;&gt;
          &lt;div id=&quot;lifespan-chart-content&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>javascript:</code></p>
  <pre><code>class Polyline {
  
      constructor(input) {
          this.input = input;
          this.nodes = this.convertNodes(input[&quot;nodes&quot;]);
          this.color = input[&quot;color&quot;];
          this.width = input[&quot;width&quot;];
          this.height = input[&quot;height&quot;];
  
          if (input[&quot;fill&quot;] === undefined) {
              this.fill   = &quot;&quot;;
          } else {
              this.fill   = input[&quot;fill&quot;];
          }
          if (input[&quot;stroke&quot;] === undefined) {
              this.stroke   = &quot;black&quot;;
          } else {
              this.stroke   = input[&quot;stroke&quot;];
          }
          if (input[&quot;stroke_width&quot;] === undefined) {
              this.stroke_width   = &quot;1.5&quot;;
          } else {
              this.stroke_width   = input[&quot;stroke_width&quot;];
          }
          // for (var key in input) {
          //     console.log(input[key]);
          // }
      }
  
      changeParams(input) {
          if (&quot;nodes&quot; in input) {
              this.nodes  = this.convertNodes(input[&quot;nodes&quot;]);
          }
          if (&quot;color&quot; in input) {
              this.color  = input[&quot;color&quot;];
          }
          if (&quot;width&quot; in input) {
              this.width  = input[&quot;width&quot;];
          }
          if (&quot;height&quot; in input) {
              this.height = input[&quot;height&quot;];
          }
          if (&quot;fill&quot; in input) {
              this.fill   = input[&quot;fill&quot;];
          }
          if (&quot;stroke&quot; in input) {
              this.stroke = input[&quot;stroke&quot;];
          }
          if (&quot;stroke_width&quot; in input) {
              this.stroke_width = input[&quot;stroke_width&quot;];
          }
      }
  
      convertNodes(list) {
          let result = &quot;&quot;;
          let i = 0;
          while (i &lt; list.length) {
              result += list[i];
              result += &quot;,&quot;;
              result += list[i+1];
              result += &quot; &quot;;
              i = i + 2;
          }
          return result;
      }
      
      setSvg() {
          this.svg = `
  &lt;svg height='${this.height}', width='${this.width}'&gt;
      &lt;polyline points='${this.nodes}', style='fill:${this.fill}, stroke:${this.stroke},stroke-width:${this.stroke_width}' /&gt;
  &lt;/svg&gt;
          `;
          //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 = {
          &quot;nodes&quot; : [0,0,50,50,100,100,200,200,300,300,350,350,450,500,550,650],
          &quot;color&quot; : &quot;red&quot;,
          &quot;width&quot; : 500,
          &quot;height&quot;: 300,
          &quot;fill&quot; : &quot;bisque&quot;,
          &quot;stroke&quot; : &quot;orange&quot;,
          &quot;stroke_width&quot; : 2
      };
      
      p1 = new Polyline(input);
      p1.setSvg();
      p1.loadChart(); // ??? error on this place 
  })
  </code></pre>
  <p>And everything is ok, but when I want to add block to html in function <code>loadChart</code> I see an error in console:</p>
  <p><code>Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. at Polyline.loadChart</code>. What I should do to avoid such an error? I commented a place where error occures. Thanks in advance!</p>
  <p>EDIT 1 : Forgot to execute <code>setSvg</code> before <code>loadChart</code>, I added it above, now it draws ok, but error is still here. Is it ok?</p>