# Programatically create component

**URL:** <https://discuss.emberjs.com/t/programatically-create-component/11783>\
**Category:** Uncategorized\
**Created:** [October 18, 2016, 1:53am UTC](https://discuss.emberjs.com/t/programatically-create-component/11783 "2016-10-18T01:53:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tookien](https://avatars.discourse-cdn.com/v4/letter/t/90ced4/32.png) [@tookien](https://discuss.emberjs.com/u/tookien)\
**Post date:** [October 18, 2016, 1:53am UTC](https://discuss.emberjs.com/t/programatically-create-component/11783/1 "2016-10-18T01:53:44Z")

</div>

I want to add a component programatically and append that after a target element.

something like this:

let comp = SomeComponent.create({ item: item });

comp.insertAfter(‘#someExistingComponentId’);

but this is not working.

Ember.$(comp.element).insertAfter(‘#someExistingComponentId’);

neither is that

any ideas? thanks

---

<div class="post-metadata">

**Author:** ![l\_tonz](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/l_tonz/32/12634_2.png) [@l\_tonz](https://discuss.emberjs.com/u/l_tonz)\
**Post date:** [October 18, 2016, 7:17am UTC](https://discuss.emberjs.com/t/programatically-create-component/11783/2 "2016-10-18T07:17:30Z")

</div>

Are you using ember cli? You can do ember g component my-component. Maybe you can explain a bit more what you are doing.

maybe you can add logic on the template itself. If something else view my-component…

---

<div class="post-metadata">

**Author:** ![acorncom](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/acorncom/32/12198_2.png) [@acorncom](https://discuss.emberjs.com/u/acorncom)\
**Post date:** [October 20, 2016, 4:43am UTC](https://discuss.emberjs.com/t/programatically-create-component/11783/3 "2016-10-20T04:43:06Z")

</div>

Generally it isn’t that easy to. Can you give us a few more details on what you are trying to do so we can make other suggestions?

---

<div class="post-metadata">

**Author:** ![l\_tonz](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/l_tonz/32/12634_2.png) [@l\_tonz](https://discuss.emberjs.com/u/l_tonz)\
**Post date:** [October 20, 2016, 5:32am UTC](https://discuss.emberjs.com/t/programatically-create-component/11783/4 "2016-10-20T05:32:16Z")

</div>

> [@tookien](#):
>
> I want to add a component programatically and append that after a target element.
> 
> something like this:
> 
> let comp = SomeComponent.create({ item: item });
> 
> comp.insertAfter(‘#someExistingComponentId’);
> 
> but this is not working.
> 
> Ember.$(comp.element).insertAfter(‘#someExistingComponentId’);
> 
> neither is that
> 
> any ideas? thanks

Let’s say you have a parent TopLevelComponent. Ember has a hook didRender() you can utilize. Inside there you can trigger a flag that tells childComponent to render.

// top-level.hbs {{#if targetElementExists}} {{childComponent}} {{/if}}

[//top-level.js](https://top-level.js)

export default Ember.Component.extend({  
targetElementExists: false, didRender(){ this.set(‘targetElementExists’, true) } });