Javascript 使用ECS动态添加元素时出现问题

我对使用javascript非常陌生，从js函数动态添加元素时遇到问题

我使用的是node.js+express+ejs+materialiecss，我有一个带有卡片的局部视图，如果我在渲染的ejs中包含这个文件，一切正常，但是如果动态添加相同的元素，文本输入中的标签会重叠

当我使用“include”添加带有局部视图的卡片时，情况也是一样的，但是文本输入几乎立即刷新，标签也正常。所以我猜DOM加载后会发生一些事情

为了进行测试，我在文件完全呈现之前调用了创建卡片的函数，它也正常工作，如果在DOM完全加载之后调用相同的函数，它就不工作了

我在MaterializeCSS站点中检查了文档中的文本输入，但没有初始化

这就是我如何在ejs（open_text.ejs）中包含第一张卡，以及在DOM完全加载之前使用js函数包含第二张卡的方法（两者都可以正常工作）

创建卡片（“文本”）；

这就是我如何添加相同的卡，但使用一个按钮（它的内容与上面使用的ejs文件完全相同）

功能创建卡（类型）{
让文本_card=“”；
文字卡+=''
文字卡+=''
文字卡+=''
文字卡+=''
文字卡+=''
文字卡+=''
文字卡+=''
文本卡+=‘注释’
文字卡+=''
文本卡+=“问题标题”
文字卡+=''
文字卡+=''
文本\u卡+='格式\u颜色\u文本'
文字卡+=''
文本卡+=“打开文本区”
文字卡+=''
文字卡+=''
文本卡+=“必填”
文字卡+='

任何帮助都将不胜感激

提前感谢。
在标签中添加“class=active”后，一切正常

<div id="content">
   <%- include('../partials/cards/create/open_text') %>  
   <script type="text/javascript">create_card('text');</script>
</div>

function create_card(type){
    let text_card = "";
    text_card+=     '<div class="row">'
    text_card+=         '<div class="col s6 offset-s3"> <span class="flow-text"></span>'
    text_card+=             '<div class="card white-text darken-1">'
    text_card+=                 '<div class="card-content black-text">'
    text_card+=                     '<form class="container">'
    text_card+=                         '<div class="row">'
    text_card+=                             '<div class="input-field row s12" style="margin-bottom: 30px;">'
    text_card+=                                 '<i class="material-icons prefix">comment</i>'
    text_card+=                                 '<input placeholder="Please type the question Title" id="question_title" type="text" class="validate" required data-length="40">'
    text_card+=                                 '<label for="question_title">Question Title</label>'
    text_card+=                             '</div>'
    text_card+=                             '<div class="input-field row s12" style="padding-bottom: 10px;">'
    text_card+=                                 '<i class="small material-icons prefix">format_color_text</i>'
    text_card+=                                 '<input value="500 characters limit" id="text_area" type="text" disabled>'
    text_card+=                                 '<label for="text_area">Open Text Area</label>'
    text_card+=                             '</div>'
    text_card+=                             '<div class="switch" id="switch1">'
    text_card+=                                 '<label> Mandatory <input type="checkbox"> <span class="lever"></span></label>'
    text_card+=                                 '<a class="btn-floating waves-effect waves-light red tooltipped" id="btn_delete_card" data-position = "bottom" data-delay = "50" data-tooltip = "delete card" style="margin-left: 20px;">'
    text_card+=                                 '<i class="material-icons">delete</i></a>'
    text_card+=                             '</div>'
    text_card+=                         '</div>'
    text_card+=                     '</form>'
    text_card+=                 '</div>'
    text_card+=             '</div>'
    text_card+=         '</div>'
    text_card+=     '</div>';

    document.getElementById("content").innerHTML +=  text_card;

}