JS动态添加Div后样式与类不显示且Bootstrap类失效求助

用JavaScript动态向HTML中添加div后，控制台无法显示该div的自定义类「armen」与内联style，同时Bootstrap类也无法生效。目前已成功创建包含表单的div，但样式与类均未正常生效。

相关代码 #

main_page 代码

<?php
require "connection.php";?>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
    <?php require "header.php"; ?>
</header>
<main>
    <?php require "main_content.php"; ?>
</main>
<footer>
    <?php ?>
</footer>
</body>
<script src="js/change_avatar_settings.js"></script>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</html>

main_content.php 代码

<main class="container mt-5">
<div class="display-none" id="change_display">
    <div id="change_avatar" class="container">
    </div>
</div>  
</main>

JavaScript 代码（通过header中的onclick调用，调用无问题）

function changeAvatar() {
    document.getElementById('change_avatar').innerHTML += '<div class = "armen" style = "width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
}

问题原因及解决办法 #

1. HTML属性格式错误
   拼接HTML字符串时，属性名与值之间加了多余空格（比如class = "armen"），虽然HTML语法允许，但部分浏览器解析时可能出现异常，导致类名和样式无法正常识别。
   修正后的JS代码：

   function changeAvatar() {
       document.getElementById('change_avatar').innerHTML += '<div class="armen" style="width:500px;height:500px;"><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image"><input type="submit" value="Upload Image" name="avatar_btn"><input type="submit" value="Delete Image" name="del_avatar_btn"></form></div>'
   }
   

2. Bootstrap类名错误
   使用了自定义的display-none类隐藏父元素，Bootstrap官方的隐藏类是d-none。如果父元素被错误隐藏，子元素也会被隐藏，容易误以为样式未生效。
   修正后的main_content.php代码：

   <main class="container mt-5">
   <div class="d-none" id="change_display">
       <div id="change_avatar" class="container">
       </div>
   </div>  
   </main>
   

3. JS文件加载顺序错误
   Bootstrap依赖jQuery，必须先加载jQuery，再加载Bootstrap，最后加载自定义JS文件，否则可能导致Bootstrap功能异常。
   修正后的加载顺序：

   <script src="js/jQuery.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/change_avatar_settings.js"></script>
   

4. 额外检查点

   • 确认style.css中.armen类已正确定义，可添加测试样式验证：

     .armen {
         background-color: #f0f0f0;
         border: 1px solid #ccc;
     }
     

   • 打开浏览器开发者工具（F12），在Elements面板查看动态添加的div是否存在，类名和内联style是否正确渲染；若存在但样式未生效，检查是否有其他高优先级样式覆盖了.armen的定义。

内容的提问来源于stack exchange，提问作者Tigran Hakobyan