How do I insert a div element to another div element by the click of a button?

[kapnevets]

Hello!

I basically want to insert content in a div element into another div element by a click of a button.

So I moved on to the “workflow” and tried to create my own custom javascript to do that. However, it gives me errors. The example code:

var div = document.getElementById('myDiv');
var newElement = document.createElement('p');
newElement.textContent = 'Hello, world!';
div.appendChild(newElement);

Please let me know how to do this correctly!

Thanks!

[Broberto (Rob)]

1. Make an array variable
2. Make a div with the div you wanna add inside
3. Each time you click a button, add item at the end of the array via Change variable value workflow, insert at the end.

You’re done. Now you have a dynamically generated div

[kapnevets]

So I bound the array to the parent div, and I created a work that appends to the binded array. However, the actual div information is still lost to me. Below is the workflow I am using

But the div doesn’t actually show up to the array of trayContents, when I click on my button.
The screen shot below is showing empty objects when I fill the array with stuff.

[Broberto (Rob)]

No no no, you don’t do newElement, forget for a second about doing this manually.

What you want to do is this:

Insert just the object at the end of your variable, in your case, this could be

First case:

{ greeting: "Hello, world!" }

then you get an array like this

[{ greeting: "Hello, world!" }, { greeting: "Hi!" }, { greeting: "Wazzuuup!" }]

and display it like this

Or you could go and bind this instead of a text element to an HTML element like this.

[kapnevets]

What kind of element is the Wrapper Div? I used the regular div, and it won’t give me an option to bind to item.data.

Also, thank you for all of the help.

[kapnevets]

ahhh. Just when I asked the question. I figured it out. Thanks @ Broberto. My next step is to append to list!

Thanks.

[Broberto (Rob)]

Indeed! Great you figured it out WeWeb relies heavily on this logic So it’s great to get used to it.