Javascript添加了另一个div，而不是覆盖

Question

我正在尝试使用以下脚本更改图表内容：

function switchType() {
    var e = document.getElementById("typeSelect");
   var selected_value = e.options[e.selectedIndex].value;
   console.log(selected_value)

   anychart.onDocumentReady(function () {
     var ents = {{ entities_dict|safe }}
     var dropdown = document.getElementById("typeSelect");
     var val = dropdown.value;
     /*
     var data = [
       {value: 'GeopoliticalEntity',
        children: [
        {% for i in entities_dict.get('GeopoliticalEntity') %}
           {value:   "{{ i }}"},
         {% endfor %}

       ]}
     ];
     */
     var data = [
     ];

     data.push({value:     val,
            children: [
               {value:   "country"},
               {value:   "europe"},
               {value:   "German"},

           ]})
     //let result = data.map(a => a.children);

     // create a chart and set the data
     var chart = anychart.wordtree(data, "as-tree");

     // set the chart title
     chart.title("Word Tree: Data (Tree)");

     // set the container id
     chart.container("word_tree");

     // initiate drawing the chart
     chart.draw();

 });
  }

这是我的HTML

<div class="container">
  <div class="jumbotron">
    {% for k in survey %}
      <h2 class="display-4">Keyword Analysis</h2>
      <h2 class="display-5">Most frequent keywords</h2>
      <div id="word_cloud" style="width: 1000px; height: 500px; margin-bottom:5px;"></div><br>
      <h2 class="display-5">Keyword frequency and their relevance score</h2>
      <div id="bubble_chart" style="width: 1000px; height: 500px;"></div><br>
      <h2 class="display-5">Entities found in responses</h2>
      <select id="typeSelect" onchange="switchType()">
        {% for key in entities_dict.keys() %}
          {% if loop.first %}
            <option selected="selected" value="{{ key }}">{{ key }}</option>
          {% else %}
            <option selected="selected" value="{{ key }}">{{ key }}</option>
          {% endif %}
        {% endfor %}
    </select>
      <div id="word_tree" style="width: 1000px; height: 500px;"></div>
    {% endfor %}
  </div>
</div>

结果是它创建图表，然后在下面创建另一个图表，并在每次选择更改时创建另一个图表。

有没有办法覆盖请求的div，而不是将另一个div附加到HTML页面？

Answer 1

我在这个线程上找到的这段代码为我解决了这个问题：How to overwrite html element from javascript?

     if (element) {
    // Get its parent
        parent = element.parentNode;

        // Create the new element
        newElement = document.createElement('div');

        // Set its ID and content
        newElement.id = "word_tree";

        // Insert the new one in front of the old one (this temporarily
        // creates an invalid DOM tree [two elements with the same ID],
        // but that's harmless because we're about to fix that).
        parent.insertBefore(newElement, element);

        // Remove the original
        parent.removeChild(element);
    }