js append追加html后动态添加css样式

在使用JavaScript的append方法追加HTML后，可以通过以下两种方法动态添加CSS样式：

1. 使用JavaScript创建style元素，并将CSS样式添加到其中，再将style元素追加到head元素中。

示例代码：

var css = ".dynamic-class {color: red;}";
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName("head")[0].appendChild(style);

2. 直接使用JavaScript设置元素的style属性，来修改元素的样式。

示例代码：

var div = document.createElement("div");
div.innerHTML = "Hello World";
div.style.color = "red";
document.body.appendChild(div);

以上两种方法都可以实现动态添加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`元素中，样式表会异步加载并应用到新添加的元素上。

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样式会自动应用到新的元素上。