# Changing innerHtml trough p5

**URL:** <https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192>\
**Category:** Beginners\
**Created:** [November 4, 2018, 7:11pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192 "2018-11-04T19:11:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Noxid](https://avatars.discourse-cdn.com/v4/letter/n/5f8ce5/32.png) [@Noxid](https://discourse.processing.org/u/Noxid)\
**Post date:** [November 4, 2018, 7:11pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/1 "2018-11-04T19:11:50Z")

</div>

Is p5 capable of changing the innerHTML of an html element?I know that you can change the value trough select(#something).value(); but is there an equivalent to this function for changing innerHTML

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 7:14pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/2 "2018-11-04T19:14:30Z")

</div>

[p5js.org/reference/#/p5.Element/html](http://p5js.org/reference/#/p5.Element/html)

---

<div class="post-metadata">

**Author:** ![Noxid](https://avatars.discourse-cdn.com/v4/letter/n/5f8ce5/32.png) [@Noxid](https://discourse.processing.org/u/Noxid)\
**Post date:** [November 4, 2018, 7:16pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/3 "2018-11-04T19:16:51Z")

</div>

Thanks for the reply but I am asking about a pre established html element that was not created in the p5 sketch, because I need to apply css to it

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 7:24pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/4 "2018-11-04T19:24:14Z")

</div>

> [@Noxid](#):
>
> … about a pre established html element that was not created in the p5 sketch, …

You have already answered that in your 1st post:

> [@Noxid](#):
>
> I know that you can change the value through `select(#something).value();`

Function **select()** returns a [[u]p5.Element[/u]](https://p5js.org/reference/#/p5.Element) wrapper for the searched Element:

> **[reference | p5.js](https://p5js.org/reference/#/p5/select)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Just switch [[u]p5.Element[/u]](https://p5js.org/reference/#/p5.Element) method **value()** to **html()** this time.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 7:28pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/5 "2018-11-04T19:28:24Z")

</div>

> [@Noxid](#):
>
> because I need to apply css to it

For CSS, I believe the p5.Element::**style()** method would be much more appropriate & practical:

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/style)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![Noxid](https://avatars.discourse-cdn.com/v4/letter/n/5f8ce5/32.png) [@Noxid](https://discourse.processing.org/u/Noxid)\
**Post date:** [November 4, 2018, 7:40pm UTC](https://discourse.processing.org/t/changing-innerhtml-trough-p5/5192/6 "2018-11-04T19:40:36Z")

</div>

Thanks a lot for the quick answer ! Your suggestion solved my problem if you can call it one, it also cleared up a lot of the misunderstandings I had about the DOM manipulation.You were of great help and I really appriciate it. Keep up the great work
