jQuery动态追加HTML代码后CSS样式不生效问题求助

问题场景 #

静态编写的HTML能正常应用CSS样式：

<head>
    <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
    <div id="mydiv">
       <div class="myclass">
          <p>hello world</p>
       </div>
    </div>
</body>

但用jQuery的append方法动态添加HTML时，CSS样式死活不生效，相关代码如下：

JavaScript代码 #

$(document).ready(function() {
  $('#mydiv').append('<div class="myclass">');
  $('#mydiv').append('<p>hello world</p>');
  $('#mydiv').append('</div>');
});

CSS代码 #

.myclass p {
  color: red;
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="mydiv">
</div>

问题根因 #

你这么用append完全错了——jQuery的append不会像手写HTML那样等你补全闭合标签。每次调用append('<div class="myclass">')时，jQuery会自动把标签补全成<div class="myclass"></div>插入到DOM里。最终生成的结构是：

<div id="mydiv">
  <div class="myclass"></div>
  <p>hello world</p>
</div>

说白了，p标签根本不在.myclass容器里，CSS选择器.myclass p自然匹配不到，样式当然不生效。

解决办法 #

1. 一次性拼接完整HTML再append #

把要添加的嵌套结构拼成一个完整字符串，一次性传给append：

$(document).ready(function() {
  $('#mydiv').append('<div class="myclass"><p>hello world</p></div>');
});

2. 先创建容器再添加子元素 #

先建好.myclass容器，把p元素塞进去，再整体插入到目标容器：

$(document).ready(function() {
  const $classContainer = $('<div class="myclass"></div>');
  $classContainer.append('<p>hello world</p>');
  $('#mydiv').append($classContainer);
});

3. 用链式操作构建嵌套结构 #

通过appendTo和parent()链式调用直接生成嵌套DOM：

$(document).ready(function() {
  $('<p>hello world</p>').appendTo('<div class="myclass"></div>').parent().appendTo('#mydiv');
});

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