# How to insert javascript to dash

**URL:** <https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926>\
**Category:** Dash Python\
**Created:** [July 14, 2017, 2:10am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926 "2017-07-14T02:10:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimmybow](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jimmybow/32/6281_2.png) [@jimmybow](https://community.plotly.com/u/jimmybow)\
**Post date:** [July 14, 2017, 2:10am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/1 "2017-07-14T02:10:39Z")

</div>

I am new to use js and I insert a line of js in the html.Script in app.layout, but it don’t work

> ```
> app.layout = html.Div([
> html.Div(id = 'uuu') ,
> html.Script('document.getElementById("uuu").innerHTML = "Hello"', type="text/JavaScript")   
> ])
> 
> ```

then, I save

> document.getElementById(“uuu”).innerHTML = “Hello”

to github and change the app.scripts.append\_script by url

> app.scripts.append\_script({  
> “external\_url”: my\_js\_url  
> })

but it don’t work, too…

the javascript can work well on console in google chrome, so how do I make it work in dash …?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 20, 2017, 9:54pm UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/2 "2017-07-20T21:54:51Z")

</div>

@jimmybow - did you end up figuring this out? `append_script` _should_ work although the `document.getElementById` might be referring to an ID that _hasn’t yet rendered_ on the page itself.

I haven’t experimented with using `html.Script` itself either.

---

<div class="post-metadata">

**Author:** ![jimmybow](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jimmybow/32/6281_2.png) [@jimmybow](https://community.plotly.com/u/jimmybow)\
**Post date:** [July 20, 2017, 11:11pm UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/3 "2017-07-20T23:11:52Z")

</div>

> [@chriddyp](#):
>
> should work although the document.getElementById might be referring to an ID t

from my try, html.Script() is not available…, I don’t know the reason… ,  
append\_script is available , but it can’t change the content in app.layout (from react.js)…  
the way i only can do is build a new dcc to run javascript …

---

<div class="post-metadata">

**Author:** ![zhsee](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/zhsee/32/3384_2.png) [@zhsee](https://community.plotly.com/u/zhsee)\
**Post date:** [June 23, 2018, 10:15am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/4 "2018-06-23T10:15:24Z")

</div>

Hi chriddyp,

have you try out the html.Script?

Zh

---

<div class="post-metadata">

**Author:** ![mikesmith1611](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mikesmith1611/32/2130_2.png) [@mikesmith1611](https://community.plotly.com/u/mikesmith1611)\
**Post date:** [July 11, 2018, 10:54am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/5 "2018-07-11T10:54:40Z")

</div>

Yeah I’m having a problem with a script that relies on an Id that has not been rendered yet. Using the html.Script tag (rendered at a later date) doesn’t seem to work, does the Script tag even do anything atm?

---

<div class="post-metadata">

**Author:** ![jimmybow](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jimmybow/32/6281_2.png) [@jimmybow](https://community.plotly.com/u/jimmybow)\
**Post date:** [April 2, 2019, 8:09am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/6 "2019-04-02T08:09:03Z")

</div>

I just create a component [visdcc.Run\_js](https://github.com/jimmybow/visdcc#3-visdccrun_js-) to solve this problem, it run js in react.js env and using **setProps** method to callback the props.🙂

---

<div class="post-metadata">

**Author:** ![ravi](https://avatars.discourse-cdn.com/v4/letter/r/58956e/32.png) [@ravi](https://community.plotly.com/u/ravi)\
**Post date:** [August 10, 2020, 6:01am UTC](https://community.plotly.com/t/how-to-insert-javascript-to-dash/4926/7 "2020-08-10T06:01:52Z")

</div>

> [@chriddyp](#):
>
> @jimmybow - did you end up figuring this out? `append_script` _should_ work although the `document.getElementById` might be referring to an ID that _hasn’t yet rendered_ on the page itself.

Same issue I am facing. There are some external and local js files which I wish to execute only when layout is done. How to achieve that?