Question

我想将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>

制作this button。

这就是我在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);
}

以上是code produces

如何在保留离子格式的同时使用javascript来操作DOM？

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

Answer 1

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

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

使用离子CSS动态附加子节点

1 个答案: