# I want to append a component to my page after I clicked the button, how could this be done?

**URL:** <https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874>\
**Category:** Uncategorized\
**Created:** [July 10, 2014, 4:08am UTC](https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874 "2014-07-10T04:08:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hwoarangzk](https://avatars.discourse-cdn.com/v4/letter/h/919ad9/32.png) [@hwoarangzk](https://discuss.emberjs.com/u/hwoarangzk)\
**Post date:** [July 10, 2014, 4:08am UTC](https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874/1 "2014-07-10T04:08:55Z")

</div>

In my previous post, many developers helped me a lot with Ember’s basic knowledge. Thanks go to these guys again:) But here, I still wonder how to append a component into the page. I know that I could write my component in the template and then use a boolean value to controll its display or not, but in this way, there is no animation effect when the component is showing or hiding. So hereby I want to know whether there is a way to append a component to the page? Thanks for your help!

---

<div class="post-metadata">

**Author:** ![ramchiranjeevi](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ramchiranjeevi/32/15470_2.png) [@ramchiranjeevi](https://discuss.emberjs.com/u/ramchiranjeevi)\
**Post date:** [July 17, 2014, 2:58pm UTC](https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874/2 "2014-07-17T14:58:13Z")

</div>

@hwoarangzk To give an animation effect to your Ember Component when showing in your DOM, use the **didInsertElement** function.

```
App.TempYourComponent = Ember.Component.extend({
didInsertElement: function(){
    this.$('#youdivid').show("slide", { direction: "left" }, 100);
}
});

```

You can use jQuery animation methods in didInsertElement function to animate your Component when inserting into your DOM.

---

<div class="post-metadata">

**Author:** ![hwoarangzk](https://avatars.discourse-cdn.com/v4/letter/h/919ad9/32.png) [@hwoarangzk](https://discuss.emberjs.com/u/hwoarangzk)\
**Post date:** [July 18, 2014, 1:08am UTC](https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874/3 "2014-07-18T01:08:12Z")

</div>

Thank you so much! I’ll take a try!

---

<div class="post-metadata">

**Author:** ![kyleshevlin](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kyleshevlin/32/11839_2.png) [@kyleshevlin](https://discuss.emberjs.com/u/kyleshevlin)\
**Post date:** [March 11, 2016, 7:32am UTC](https://discuss.emberjs.com/t/i-want-to-append-a-component-to-my-page-after-i-clicked-the-button-how-could-this-be-done/5874/4 "2016-03-11T07:32:08Z")

</div>

Once again, this answer doesn’t answer the OPs question. How do you append a component to a page after user action?