Javascript 使用Ionic CSS动态附加子节点

我想将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在保留离子格式的同时操作DOM

---

使用：Node 8.3.0，Angular 4，Ionic 3。

我有一个类似的问题，每次单击一个对象时，我都会将其推到在前端创建的数组中，并在一个单独的组件中显示对象数组，这样我就只能设置所选项目的样式

---

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

我有一个类似的问题，每次单击对象时，我都会将对象推到数组中，我会将它推到前端创建的数组中，并在单独的组件中显示对象数组，这样我就只能对所选项目进行样式设置

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

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);
}