javascript - Django-Javascript - 在将新元素添加到 html 模板正文时，materialcss 会破坏 javascript 代码

Question

好吧，这让我头晕目眩……当我在没有加载材料 css 的测试环境中运行以下代码时，我得到了预期的输出，一个带有动物可供选择的下拉菜单。但是，如果我在加载材料 css 的情况下运行完全相同的代码，它只会显示标题，而没有可见的下拉菜单。为什么会这样？

html

{% extends 'base.html' %}
{% load materializecss %}
{% block content %}
    <button id  = 'id_graph_type'>Add Stuff</button>
{% endblock %}

javascript

graphInput.addEventListener('click', e=>{
    var values = ["dog", "cat", "parrot", "rabbit"];
 
    var select = document.createElement("select");
    select.name = "pets";
    select.id = "pets"
   
    for (const val of values) {
      var option = document.createElement("option");
      option.value = val;
      option.text = val.charAt(0).toUpperCase() + val.slice(1);
      select.appendChild(option);
    }
   
    var label = document.createElement("label");
    label.innerHTML = "Choose your pets: "
    label.htmlFor = "pets";
   
    document.body.appendChild(label).appendChild(select);
})

标签： javascripthtmlmaterialize