Coding Exercises Start

# Dynamically Create a List **URL:** \ **Category:** web dev\ **Created:** [October 4, 2022, 4:10am UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852 "2022-10-04T04:10:40Z")\ **Posts on this page:** 5\ **Page:** 1

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 4, 2022, 4:10am UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852/1 "2022-10-04T04:10:40Z")

This is the companion topic to the **Dynamically Create a List** coding exercise: > **[Dynamically Create a List : Frontend Coding Exercises](https://www.kirupa.com/html5/dynamically_create_populate_list.htm)** > > Show off your DOM skills in this fun exercise where you get to dynamically generate a list. ---

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\ **Post date:** [October 4, 2022, 10:06am UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852/2 "2022-10-04T10:06:04Z")

```auto Coding Exercises Start ``` ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 5, 2022, 12:13am UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852/3 "2022-10-05T00:13:14Z")

Another solution would be to use string literals and innerHTML to insert the ul/li elements directly. That fits the constraints where one must use JavaScript to get the elements to appear. 🙂 ---

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [October 5, 2022, 1:37pm UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852/4 "2022-10-05T13:37:13Z")

You think this pizza was made at a _chain_ restaurant? 🥁 ```javascript document .body .appendChild( document .createElement("style") ) .appendChild( document .createTextNode("li{list-style:none;margin:2em 0;}") ) .parentNode .appendChild( document .createTextNode("li span{border-radius:.25em;background:#f9d748;padding:.5em .25em;font-family:sans-serif;}") ) .parentNode .parentNode .appendChild( document .createElement("ul") ) .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Tomato") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Cheese") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Pepperoni") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Olives") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Jalapeños") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Pineapple") ) .parentNode .parentNode .parentNode .appendChild( document .createElement("li") ) .appendChild( document .createElement("span") ) .appendChild( document .createTextNode("Ham") ) ``` ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 5, 2022, 4:25pm UTC](https://forum.kirupa.com/t/dynamically-create-a-list/653852/5 "2022-10-05T16:25:25Z")

![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/8/f/8f73a110d906156d4fb1bf89f28942620a69362b.gif) You both got badges! 😛