从 JavaScript 插入 DOM 元素时，不显示 CSS 样式答案

【问题标题】：When inserting DOM element from JavaScript, CSS styles are not displayed从 JavaScript 插入 DOM 元素时，不显示 CSS 样式
【发布时间】：2021-03-22 01:59:46
【问题描述】：

我想显示一个带有标题和内容的日志。

使用以下代码，li 元素插入到 DOM 中，右侧为 className，但样式不显示。

这是在一个 Angular 组件中，我认为这可能是错误的根源。这只是一个带有 html 的基本新应用程序：<app-example></app-example>

注意：如果我在 html 中手动插入一个元素，它会正确显示。我注意到的唯一区别是从 javascript 插入的 li 元素没有 _ngcontent-cxr-c40。

HTML：

<ul class="d-flex f-column log-list" id="log-list">
        <li id="log-item" class="log-message">
          <span class="log-message-title">TEST</span>
        </li>
</ul>

这是向日志添加元素的函数：

  private addLogElement(title: string, message: string): void {
    const newNode = document.createElement('li');
    newNode.className = 'log-message';
    const newNodeTitle = document.createElement('span');
    newNodeTitle.className = 'log-message-title';

    const headerText = document.createTextNode(title);

    newNodeTitle.appendChild(headerText);
    newNode.appendChild(newNodeTitle);

    const parentDiv = document.getElementById('log-list');
    const childDiv = document.getElementById('log-item');
    parentDiv.insertBefore(newNode, childDiv);
  }

【问题讨论】：

您的代码应该可以工作，但它不是“Angular 方式”。在这个数组上使用一个数组和一个*ngFor：angular.io/guide/structural-directives，你只需要在数组中添加一个元素
是的，您不应该那样直接修改文档。改为采用数据驱动的方法。
在操作 dom 时使用 renderer2 可能有一些好处，但它应该只适用于 JS。查看digitalocean.com/community/tutorials/angular-using-renderer2 了解更多信息

标签： javascript html css angular dom

【解决方案1】：

将此添加到您的css/scss
我添加了示例样式

:host ::ng-deep .log-message{
    color: red;
}
:host ::ng-deep .log-message-title{
    background-color: #eeee33
}

【讨论】：

【解决方案2】：

您应该使用 Renderer2 API 进行此类 DOM 操作。

在构造函数中的组件类中注入它：-

constructor(public renderer: Renderer2) {}

然后将您的方法更改为：-

private addLogElement(title: string, message: string): void {
    const newNode = this.renderer.createElement('li');
    this.renderer.addClass(newNode, 'log-message');
    const newNodeTitle = this.renderer.createElement('span');
    this.renderer.addClass(newNodeTitle, 'log-message-title');
    const headerText = this.renderer.createText(title);
    this.renderer.appendChild(newNodeTitle, headerText);
    this.renderer.appendChild(newNode, newNodeTitle);

    const parentDiv = this.renderer.selectRootElement(document.getElementById('log-list'), true);
    const childDiv = this.renderer.selectRootElement(document.getElementById('log-item'), true);
    this.renderer.insertBefore(parentDiv, newNode, childDiv);
  }

您应该使用 Renderer2 而不是原生 DOM 操作还有其他原因。

您可以在这里参考这些原因：- https://medium.com/dev-genius/dont-use-native-dom-manipulations-in-angular-6c8db13f463f

【讨论】：