# Can't access element defined in plugin outlet with DOM interface

**URL:** https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213
**Category:** Development
**Created:** [April 2, 2021, 6:44am UTC](https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213 "2021-04-02T06:44:08Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)
#### Post date: [April 2, 2021, 6:44am UTC](https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213/1 "2021-04-02T06:44:09Z")

</div>

I used the following plug-in outlet to make a button below the header.

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/below-site-header/vic-button">
    <a id="vic-button" href="http://mathbymiles.com/new-topic?title=&body=&category=uncategorized&tags=" class="btn btn-default">
        <span class="d-button-label">
            ask a question
        </span>
    </a>
</script>

```

It works just fine. However, now I want to access it with JavaScript to manipulate it, but when I try to get the element based on the `id` `vic-button`, the console just returns `null`.

So when I do

```plaintext
<script type="text/discourse-plugin" version="0.8">
    const button = document.getElementById('vic-button');
    console.log(button);
</script>

```

I get `null` as the output. Any ideas?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [April 2, 2021, 7:54am UTC](https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213/2 "2021-04-02T07:54:48Z")

</div>

It’s probably running your selector before it’s rendered the template.

You need to do this ‘in framework’.

The best approach would be to turn this into an Ember Component, then use a hook like `didInsertElement()` to capture the point at which it’s available to modify.

Remember this is a web app not a web page. Elements are dynamic not static. The plugin outlet is itself a Component so is not rendered immediately.

> **[The Component Lifecycle - Components - Ember Guides](https://guides.emberjs.com/v3.12.0/components/the-component-lifecycle/)**
>
> Part of what makes components so useful is that they let you take complete control of a section of the DOM. This allows for direct DOM manipulation, listening and responding to browser events, and using 3rd party JavaScript libraries in your Ember...

---

<div class="post-metadata">

### Author: ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)
#### Post date: [April 2, 2021, 8:00pm UTC](https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213/3 "2021-04-02T20:00:53Z")

</div>

Would I do something like this?

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.modifyClass('component:plugin-outlet', {
      didInsertElement() {
        this._super(...arguments);

        const button = document.getElementById('vic-button');
        console.log(button);
      },
    });
</script>

```

When I do this, there is a repeated null output to the console. I’m a complete newbie so I just tried to search around on meta for people doing similar things, so this is probably not the right track.

---

<div class="post-metadata">

### Author: ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)
#### Post date: [April 3, 2021, 12:00am UTC](https://meta.discourse.org/t/cant-access-element-defined-in-plugin-outlet-with-dom-interface/185213/4 "2021-04-03T00:00:24Z")

</div>

Figured it out:

```plaintext
api.decoratePluginOutlet(
       "below-site-header",
       (elem, args) => {
           const button = document.getElementById('vic-button');
           console.log(button);
       }
    );

```

The output shows what I want. And now I can manipulate the element!