js的append追加元素动态添加css失效

当使用`append()`方法动态添加元素并同时添加CSS样式时，需要注意以下几点：

1. 确保添加的CSS样式的选择器与现有的样式不冲突；
2. 确保CSS样式在元素添加到DOM树之后才定义，否则新添加的元素不会应用这些样式；
3. 如果需要在添加元素后立即应用CSS样式，可以使用`setTimeout()`方法或者异步加载样式表的方式。

下面是一个示例代码：

<style>
  .red {
    color: red;
  }
</style>

<div id="container">
  <p class="red">Hello World</p>
</div>

<script>
  // 添加一个新的段落元素，并在其后添加CSS样式
  var p = document.createElement('p');
  p.textContent = 'New Paragraph';
  p.style.color = 'red'; // 添加CSS样式
  document.getElementById('container').append(p);
</script>

在上面的代码中，我们使用`createElement()`方法创建一个新的段落元素，并为其添加了样式`color: red`。由于样式是在元素添加到DOM树之前定义的，因此新添加的元素会应用这些样式。如果需要异步加载样式表，可以使用以下代码：

<style>
  .red {
    color: red;
  }
</style>

<div id="container">
  <p class="red">Hello World</p>
</div>

<script>
  // 添加一个新的段落元素，并在其后添加CSS样式
  var p = document.createElement('p');
  p.textContent = 'New Paragraph';
  document.getElementById('container').append(p);
  
  // 异步加载样式表
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'path/to/styles.css';
  document.head.append(link);
</script>

在上面的代码中，我们先添加了一个新的段落元素，然后使用`createElement()`方法创建一个`link`元素，并设置其`rel`属性为`stylesheet`，`href`属性为样式表的路径。最后，将`link`元素添加到`head`元素中，样式表会异步加载并应用到新添加的元素上。