如何在按钮上添加单独的Html元素单击Python Dash

我正试图使用Python dash实现一个非常简单的场景。在每个按钮上添加相似的元素，然后依次单击

下面是代码

app.layout={
按钮（id='add-element-Button'，n_clicks=0，children='add-Input-element'），
html.Div（id=“布局”）
}
@应用程序回调（输出（'layout'，'children'），
[输入（'add-element-button'，'n_clicks'））
def添加策略分区（val）：
如果val：
返回html.Div（id=f“heading_element_{val}”，
[
H1（id=f“heading{val}”，children=f“{val}heading”），
]
)
其他：
提出预防性更新

似乎发生的不是添加新元素，而是用新元素和新id覆盖第一个标题元素（第一次单击时成功创建）

---

有人知道会发生什么吗？谢谢

你描述的行为非常有道理。返回一个新的div元素，这意味着覆盖布局元素的children属性。这样，您将始终替换现有子级

要使其按您希望的方式工作，您需要获取布局元素的当前子元素并将新元素添加到其中。将当前子对象作为状态对象传递给回调函数。现在将元素附加到子元素并返回列表

@app.callback(
    Output('layout', 'children'),
    [Input('add-element-button', 'n_clicks')],
    [State('layout', 'children')],
)
def add_strategy_divison(val, children):
    if val:
        el = html.Div(id=f"heading_element_{val}", [
            html.H1(id=f"heading_{val}", children=f"{val} Heading"),
        ])
        children.append(el)
        return children
    else:
        raise PreventUpdate