# Can you dynamically create a new element and bind "repeat.for" dynamically?

**URL:** <https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037>\
**Category:** Framework Knowledge\
**Created:** [October 31, 2019, 7:52pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037 "2019-10-31T19:52:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![YardGnomeNinja](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/yardgnomeninja/32/689_2.png) [@YardGnomeNinja](https://discourse.aurelia.io/u/YardGnomeNinja)\
**Post date:** [October 31, 2019, 7:52pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/1 "2019-10-31T19:52:51Z")

</div>

In my continued attempts at getting really silly and trying to do things I probably shouldn’t, I pose this question.

I want to do something to the effect of:

```auto
this.listOfThings.push({ id: 1, name: 'boo' });

let container = document.getElementById('container0');
container.innerHTML = "<div id.bind='thing.id' repeat.for='thing of listOfThings'>${thing.name}</div>"

```

I know this doesn’t work, but is there a concept I’m overlooking that will allow me to do something like this or is this a dead end?

I know `compose` or a custom element will allow it, but I’m looking for the freedom of defining the element inline, as shown, but still reaping the benefits of having the templating engine taking care of managing the items dynamically as they are added or removed from the collection the element’s repeat is bound to.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [October 31, 2019, 8:19pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/2 "2019-10-31T20:19:51Z")

</div>

The template engine has an enhance method which allows you pretty much to do exactly the same. Take a look here for a sample [https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia](https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia)  
The docs and further googling should give you enough hints

---

<div class="post-metadata">

**Author:** ![YardGnomeNinja](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/yardgnomeninja/32/689_2.png) [@YardGnomeNinja](https://discourse.aurelia.io/u/YardGnomeNinja)\
**Post date:** [October 31, 2019, 8:43pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/3 "2019-10-31T20:43:12Z")

</div>

This is wonderful! Thanks @zewa666!

---

<div class="post-metadata">

**Author:** ![YardGnomeNinja](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/yardgnomeninja/32/689_2.png) [@YardGnomeNinja](https://discourse.aurelia.io/u/YardGnomeNinja)\
**Post date:** [November 1, 2019, 5:19pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/4 "2019-11-01T17:19:30Z")

</div>

Using the Gist @bigopon provided in the SO post as the basis, I created this stupid simple example.  
[https://gist.run/?id=df94e4a7a2f0a5d5a357e22087523f7d](https://gist.run/?id=df94e4a7a2f0a5d5a357e22087523f7d)

Thanks again, @zewa666 for setting me in the right direction. Between @bigopon’s SO answer and @dwaynecharrington’s great post [https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/](https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/) I feel like I’ve just gained a new superpower!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 1, 2019, 7:18pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/5 "2019-11-01T19:18:57Z")

</div>

Yep that one from @dwaynecharrington is golden. Didnt find it right away otherwise i’d have linked it right away.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 1, 2019, 7:22pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/6 "2019-11-01T19:22:02Z")

</div>

Enhance is especially powerful when working in CMS environments or generally when html is dynamically placed e.g via DB queries or often also jquery plugins such as GoldenLayout. I’m using that for the Webtestit IDE, where every panel is a dedicated enhanced view

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [November 3, 2019, 10:41am UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/7 "2019-11-03T10:41:59Z")

</div>

Glad that old post of mine is still relevant and helpful to some people. You’re welcome guys.

---

<div class="post-metadata">

**Author:** ![glyad](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/glyad/32/364_2.png) [@glyad](https://discourse.aurelia.io/u/glyad)\
**Post date:** [December 27, 2024, 10:38pm UTC](https://discourse.aurelia.io/t/can-you-dynamically-create-a-new-element-and-bind-repeat-for-dynamically/3037/8 "2024-12-27T22:38:24Z")

</div>

> [@YardGnomeNinja](#):
>
> [Enhancing At Will Using Aurelia's Templating Engine Enhance API - I Like Kill Nerds](https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/)

Thank you a lot. Yes, it’s still be useful