8.14: parent() and child() again with Variables - p5.js Tutorial

TL;DR

Learn how to use the parent-child function with dynamically generated HTML elements in p5.js.

Transcript

in this video I want to look again at the parent-child function so it's a bit of a review of that function but I want to look at it in a slightly different context before the main reason that I looked at the parent function was to take a Dom element that I generated in code and insert it into another place in sort of the existing HTML so we just fi... Read More

Key Insights

• 👪 The parent-child function in p5.js allows you to insert dynamically generated HTML elements into existing elements.
• 📟 The create image function in p5.js generates an image Dom element that can be inserted into the HTML page separately from the canvas.
• 🏪 Storing references to dynamically generated elements in an array can provide easy access for future manipulation and removal.
• 📟 The p5 Dom library provides functions like remove and hide for removing or hiding elements from the page.

Questions & Answers

Q: How can you use the parent-child function with dynamically generated HTML elements?

To use the parent-child function, you need to reference the ID of the HTML element you want to insert the generated element into. Pass the p5 variable containing the Dom element to the parent or child function, depending on whether you want to parent or child the element.

Q: What is the difference between create image and load image in p5.js?

The create image function generates an image Dom element that can be inserted into the HTML page separately from the canvas. On the other hand, the load image function is used to load an image file and draw it onto the canvas.

Q: How can you access the parent element of a dynamically generated element using p5.js?

By using the parent function with no argument, you can retrieve the parent element of a Dom element. This allows you to find the parent element and manipulate it accordingly.

Q: How can you remove dynamically generated elements from the page using p5.js?

You can use the remove function from the p5 Dom library to remove elements from the page. Loop through an array that stores references to the generated elements and call the remove function on each element to delete them.

Summary & Key Takeaways

• The video explores using the parent-child function with dynamically generated HTML elements in p5.js.

• It demonstrates how to insert elements into existing HTML using the parent function and a reference to a Dom element.

• The video also covers creating image elements using the create image function and shows how to parent them to different elements.