# DOM lib - how to specify container node?

**URL:** <https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487>\
**Category:** p5.js\
**Created:** [February 17, 2019, 5:12pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487 "2019-02-17T17:12:40Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 17, 2019, 5:12pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/1 "2019-02-17T17:12:40Z")

</div>

[http://p5js.org/reference/#/p5/createSlider](http://p5js.org/reference/#/p5/createSlider) says “Appends to the container node if one is specified, otherwise appends to body.”  
A. how is it specified? It doesn’t seem to be any of the arguments  
B. how do I get a valid reference to a container node? I was hoping I could pass in what is returned form document.getElementByID(); and have my little elements tucked away neatly elsewhere on the page

Frustrating how ambiguous this is - I tried a few logical guesses but nothing worked.

(FWIW, I am working in global mode but preferring to use my own canvasParent etc)

In general, any best practice for “bundle this bunch of DOM library elements outside the main canvas” would also be appreciated!

---

<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:** [February 17, 2019, 10:25pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/2 "2019-02-17T22:25:07Z")

</div>

> [@kirkjerk](#):
>
> “Appends to the container node if one is specified, otherwise appends to body.”

The statement above is clearly wrong! As we can see below in its source code: 🙈

> <https://github.com/processing/p5.js/blob/0.7.3/lib/addons/p5.dom.js#L533>

The statement `var elt = document.createElement('input');` creates the element over the _document_, and nowhere else! 🤥

> [@kirkjerk](#):
>
> How do I get a valid reference to a container node?

If it has an _id_ attribute, we can use **select()** for it: 🆔

> **[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.

For elements created inside a sketch by functions like **createElement()**, **createSlider()**, etc., simply store them in a variable. 🏬

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 17, 2019, 11:16pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/3 "2019-02-17T23:16:32Z")

</div>

So if my js memory (and messing around in console) is correct, createElement doesn’t append it as a child to anything. So if I createSlider, is there anyway to attach it to a node I access via that select() function?

---

<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:** [February 17, 2019, 11:24pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/4 "2019-02-17T23:24:02Z")

</div>

A p5.Element can become a child of another element via its method **parent()**: 👨‍👩‍👧‍👦  
[p5js.org/reference/#/p5.Element/parent](http://p5js.org/reference/#/p5.Element/parent)

And a p5.Element can make another element its child via its method **child()**: 🧒  
[p5js.org/reference/#/p5.Element/child](http://p5js.org/reference/#/p5.Element/child)

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 17, 2019, 11:24pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/5 "2019-02-17T23:24:07Z")

</div>

Ok, I think I figured it out - if you have a DIV on the page with an id of sliderbox, say, you can call `parent('#sliderbox')`

```auto
rSlider = createSlider(0, 255, 100).parent("#sliderbox");

```

heh, posted it just as you were writing 😃  
It seem a little odd to have an element attached to the body and then rip it out and assign its parent, but I can work with 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:** [February 17, 2019, 11:28pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/6 "2019-02-17T23:28:25Z")

</div>

Just a lil’ tip: No need to prefix an _id_ attribute arg w/ `#` for neither **parent()** nor **child()**. 😉

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 17, 2019, 11:41pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/7 "2019-02-17T23:41:18Z")

</div>

Actually you can even leave out the quote marks and rely on the trick of how browsers give you global variables named the same as the id of elements! But that seems a little sketch-y (no pun intended)

thanks again!

---

<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:** [February 17, 2019, 11:51pm UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/8 "2019-02-17T23:51:44Z")

</div>

> [@kirkjerk](#):
>
> … and rely on the trick of how browsers give you global variables named the same as the _id_ of elements!

I almost forgot about that 1. I remember I did some experiments w/ it a long time ago. 😛

Another thing we can do is to create custom tags, like `<dog></dog>`, `<cat></cat>`, etc., and use p5.Element::**select()** to find the custom tag w/o any prefix to its name. 😆

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 18, 2019, 12:13am UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/9 "2019-02-18T00:13:24Z")

</div>

Yeah, as I get a little further into this (simple toy app in global mode, with a few fixed input elements) I realize that there’s very little reason to even use the p5 Dom library. (I think I got excited by the sliders and colorPicker forgetting those are now part of html5) I can use oldschool onchange callbacks in elements I create and have full control. (For example I wanted a textarea and it’s not even clear the DOM library supports that)

---

<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:** [February 18, 2019, 12:22am UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/10 "2019-02-18T00:22:17Z")

</div>

> [@kirkjerk](#):
>
> I realize that there’s very little reason to even use the p5 Dom library.

It’s merely a mini jQuery library after all w/ a very simplified syntax: 🕶

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

Actually, everything p5js does can be replaced moderately easy w/ plain vanilla JS. 😳

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [February 18, 2019, 12:25am UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/11 "2019-02-18T00:25:58Z")

</div>

Heh, after 15 years of Processing and P5 I’d need a big ol’ page for “You Might Not Need P5” like I have for “You Might Not Need JQuery”. My understanding of what I like in the traditional P5 library and what can be found more or less native in standard canvas browser support is very weak.

(For instance, I can’t quite find the equivalent of p5.dom’s .input() for color picker - one that updates for each color selection, not just when the color picker is closed (on macs it doesn’t auto close))

---

<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:** [February 18, 2019, 12:35am UTC](https://discourse.processing.org/t/dom-lib-how-to-specify-container-node/8487/12 "2019-02-18T00:35:15Z")

</div>

[p5.dom](http://p5js.org/reference/#/libraries/p5.dom) lib wasn’t supposed to support everything a browser offers like [jQuery](https://jquery.org/). 🙄

Although [p5.dom](http://p5js.org/reference/#/libraries/p5.dom) offers the _elt_ prop which points directly to the internal [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) it encloses: 🧐  
[p5js.org/reference/#/p5.Element/elt](http://p5js.org/reference/#/p5.Element/elt)

For color picker, library DatGui offers a very easy implementation: 🖌

> **[DatGuiTest](http://bl.ocks.org/GoSubRoutine/861b48f0b0118219c6a7cdd28309ee62)**
>
> GoSubRoutine’s Block 861b48f0b0118219c6a7cdd28309ee62

> <https://github.com/dataarts/dat.gui/blob/master/API.md>