问题在实体化上添加元素

Question

我使用JavaScript非常新，并且在从js函数中动态添加元素时遇到问题。

我正在使用node.js + express + ejs + materializeCSS，并且我拥有一张带有卡的局部视图，如果我将此文件包含在渲染的ejs中，则一切正常，但是如果在文本中添加相同的元素，则该标签会出现变化-输入重叠。

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

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

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

这是我在DOM完全加载之前将第一张卡片包括在ejs（open_text.ejs）中，第二张使用js函数的卡片（两者都可以正常工作）

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

这是我添加相同卡但使用按钮的方式（与上面使用的ejs文件完全相同的内容）

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;

}

in this picture you can see the first two cards are ok, but the last one added from a button using the function, the labels overlaps the text below

任何帮助将不胜感激！

提前感谢。

Answer 1

在标签上添加“ class = active”后，效果很好