# How To append Action in component.js

**URL:** <https://discuss.emberjs.com/t/how-to-append-action-in-component-js/14057>\
**Category:** Ember CLI\
**Created:** [December 21, 2017, 11:34am UTC](https://discuss.emberjs.com/t/how-to-append-action-in-component-js/14057 "2017-12-21T11:34:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Amol\_Chaudhari](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amol_chaudhari/32/13580_2.png) [@Amol\_Chaudhari](https://discuss.emberjs.com/u/Amol_Chaudhari)\
**Post date:** [December 21, 2017, 11:34am UTC](https://discuss.emberjs.com/t/how-to-append-action-in-component-js/14057/1 "2017-12-21T11:34:35Z")

</div>

Hello Team ,

I have created text field dynamically from javascript

$(“myDiv”).append(‘’)

But I also want add action to it like below

$(“myDiv”).append(‘\<input type=“text” onblur={{action “validateField”}} class=“form-control mgmt-input” placeholder=“”\>’)

but its not working ,could you please help me out with it, how I can do this

---

<div class="post-metadata">

**Author:** ![gregone](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/gregone/32/15763_2.png) [@gregone](https://discuss.emberjs.com/u/gregone)\
**Post date:** [December 21, 2017, 1:34pm UTC](https://discuss.emberjs.com/t/how-to-append-action-in-component-js/14057/2 "2017-12-21T13:34:27Z")

</div>

You probably should not be using jQuery’s `append` method to add content in a template. It’d be better to rely on handlebars to do this.

e.g.

The action taken to insert your text field would set a property on the controller or component:

```nohighlight
// my-controller-or-component.js

isSecondInputVisible: false

actions: {
  didSomething() {
    this.set('isSecondInputVisible', true);
  }
}

```

Then in template, you could rely on that property top let handlebars display the input when true

```handlebars
{{!-- my-route-or-component-template.hbs --}}

{{#if isSecondInputVisible}}
  <input type=“text” onblur={{action “validateField”}} class=“form-control mgmt-input” placeholder="">
{{/if}}

```

As a note, this kind of question would probably be better to ask on stackoverflow.

---

<div class="post-metadata">

**Author:** ![Amol\_Chaudhari](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/amol_chaudhari/32/13580_2.png) [@Amol\_Chaudhari](https://discuss.emberjs.com/u/Amol_Chaudhari)\
**Post date:** [December 22, 2017, 9:19am UTC](https://discuss.emberjs.com/t/how-to-append-action-in-component-js/14057/3 "2017-12-22T09:19:34Z")

</div>

> [@gregone](#):
>
> hen in template, you could rely on that property top let handlebars display the input when true

Thanks Gregone, sure will take care from next time