js的append追加元素css失效

当使用`append()`方法将元素添加到DOM树中时，需要注意以下几点：

1. 确保添加的元素已经存在于DOM树中，或者在添加之后重新应用CSS样式；
2. 如果添加的元素包含CSS样式，确保CSS样式的选择器与现有的样式不冲突；
3. 如果添加的元素包含CSS样式，可以使用`classList`属性为其添加类名，来触发对应的CSS样式。

下面是一个示例代码：

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

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

<script>
  // 添加一个新的段落元素
  var p = document.createElement('p');
  p.textContent = 'New Paragraph';
  p.classList.add('red'); // 添加类名
  document.getElementById('container').append(p);
</script>

在上面的代码中，我们使用`createElement()`方法创建一个新的段落元素，并为其添加了类名`red`。在使用`append()`方法将其添加到容器元素中时，CSS样式会自动应用到新的元素上。

相关问题

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`元素中，样式表会异步加载并应用到新添加的元素上。

ajax使用append()后样式无效,jquery.ajax使用字符串拼接后外联css样式失效

如果使用 jQuery 的 append() 方法添加 HTML 代码后出现外联样式失效的问题，可能是因为样式表的加载顺序不正确。在使用 jQuery 的 append() 方法添加 HTML 代码时，如果样式表还没有加载完成，添加的元素样式可能会受到影响。

解决这个问题的方法是，可以将样式表提前加载，或者使用 jQuery 的 getScript() 方法异步加载样式表，确保样式表在添加元素之前已经加载完成。

具体的代码如下：

$.getScript('style.css', function() {
    $('body').append('<div class="myClass">这是一个例子</div>');
});

这段代码中，我们使用 getScript() 方法异步加载样式表 style.css，当样式表加载完成后，就会执行回调函数，然后我们再使用 append() 方法将 HTML 代码添加到 body 中。

如果需要添加多个样式，可以将样式写成 CSS 类，然后使用 addClass() 方法将这个类添加到元素上。如下代码所示：

.myClass {
    color: red;
    font-size: 16px;
}

$.getScript('style.css', function() {
    $('body').append('<div class="myClass">这是一个例子</div>');
    $('.myClass').addClass('myClass');
});

这样添加的元素样式就可以生效了。