How to run “ $('div').clone().appendTo('.wrapper'); ” in LWC? [closed]

Question

I want to achieve this in LWC.

I want to call the same HTML content (ex- div, p) multiple times in iteration & append them one below other as shown in above link.

I used this

$('div').clone().appendTo('.wrapper');

in JS, but it won't work...!!!

Can anyone please suggest some alternative. Thanks in advance.

Answer 1

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.

Playground

---

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

Answer 2

You can simply rewrite your jsfiddle jQuery snipper to LWC next way:

<template>
    <div class="container" lwc:dom="manual"></div>
    <button onclick={onAddNoteButtonClick}>Add note</button>
</template>

.note {
    margin-bottom: 10px;
    background-color: yellow;
    width: 100px;
    height: 100px;
}

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

    renderedCallback() {
        const container = this.template.querySelector('.container');
        container.innerHTML = 
        `<div class="wrapper">
            <div class="note">Content in div</div>
        </div>`;
    }

    onAddNoteButtonClick () {
        const note = this.template.querySelector('.note');
        const wrapper = this.template.querySelector('.wrapper');
        wrapper.appendChild(note.cloneNode(true));
    }
}

Main idea here is adding lwc:dom="manual" directive to be able to manipulate the DOM within container div.

Playground