In LWC, we usually do not create dynamic nodes this way. It is idiomatic in LWC to use a repeating template (for:each
and for:item
) and only change the data that drives the template, rather than clone the template itself. Here, I present what you'd do in LWC.
css
.note {
margin-bottom: 10px;
background-color: yellow;
width: 100px;
height: 100px;
}
html
<template>
<div class="wrapper">
<template for:each={items} for:item="item">
<div key={item.key} class="note">
<div>Content in div</div>
</div>
</template>
</div>
<lightning-button label="Add note" onclick={addNote}></lightning-button>
</template>
js
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
@track items = [
{ key: 0 }
];
addNote() {
this.items = [...this.items, { key: this.items.length }];
}
}