使用 Ionic CSS 动态附加子节点答案

【问题标题】：Dynamically appending child nodes with Ionic CSS使用 Ionic CSS 动态附加子节点
【发布时间】：2018-03-26 00:57:32
【问题描述】：

我想将 Ionic CSS 库中的样式添加到用 Javascript 创建的 HTML 元素中。目的是因为我从数据库中提取对象并为它们动态创建按钮。我可以收到这些项目并将它们添加到页面，但我无法正确使用它的格式。这是我想在 JavaScript 中复制的基本 HTML 示例。

<ion-list id="list" (click)=add()>
<button ion-item>
  <ion-icon name="ios-add" item-start></ion-icon>
  Add 
</button>
</ion-list>

制作这个按钮：

这就是我在 Javascript 中所拥有的。

add() {
   var listItem = document.getElementById("list");
   var listButton = document.createElement('button');
   listButton.setAttribute("class","ion-item");
   listButton.setAttribute("id", id+"1");
   var icon = document.createElement("ion-icon");
   icon.setAttribute("name","ios-add");
   let text = document.createTextNode("Add");
   listButton.appendChild(text);
   listButton.appendChild(icon);
   listItem.appendChild(listButton);
}

这就是上面的[代码产生：

如何在保留 Ionic 格式的同时使用 JavaScript 操作 DOM？

使用：节点 8.3.0、Angular 4、Ionic 3。

【问题讨论】：

标签： javascript html css angular ionic3

【解决方案1】：

我有一个类似的问题，我每次点击一个对象时将对象推送到一个数组，我会将它推送到前端创建的数组并在单独的组件中显示对象数组，这样我就可以只为选定的项目设置样式。

另一种选择是复制整个数据对象并添加布尔类型的道具，如“add”或“in_playlist”，但可能会有很多数据，因此我建议第一个解决方案。

【讨论】：