jQuery 附加的 html 代码 CSS 不起作用

Answer 1

您附加元素的方式不正确。

$('#mydiv').append('<div class="myclass">')

将附加一个带有结束标记的

div

。

 $('#mydiv').append('<p>hello world</p>');

会将该段落附加到 myclass div 的

之后，而不是作为其子级。

您可以通过使用浏览器开发工具检查渲染的 html 来看到这一点

在这种情况下，只需附加您需要的所有 HTML。

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

.myclass p {
  color: red;
}

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