Creating a div with other divs and elements inside it when pressing button

[Nicht]

I'm fairly new to programming so this question might be dumb.
So what I'm trying to do is to create a new div with other divs and images inside it when I press a button.
I've tried many things from other websites but they didn't quite do what i wanted.

This is what I'm trying to add when pressing a button:

<div class="item rarity1">
    <img src="example.png"/>
    <div class="value">$87.03</div>
   <div class="subtext">Test</div>
</div>

[cereal]

Hi,

you can create DOM nodes, see:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

As example:

<button id="button">Add</button>
<div id="box"></div>

<script type="text/javascript">
    var btn = document.getElementById('button');
    var box = document.getElementById('box');

    btn.addEventListener('click', function(event) {
      event.preventDefault();

      // create elements
      let child_img = document.createElement('img');
      let div1 = document.createElement('div');
      let div1_text = document.createTextNode('$87.03');

      let div2 = document.createElement('div');
      let div2_text = document.createTextNode('Some text');

      // append attributes
      div1.classList.add('value');
      div2.classList.add('subtext');
      child_img.setAttribute('src', 'http://lorempixel.com/400/200/sports/');

      // append img to box
      box.appendChild(child_img);

      // append text node to div1 and div1 to box
      div1.appendChild(div1_text);
      box.appendChild(div1);

      // append text node to div2 and div2 to box
      div2.appendChild(div2_text);
      box.appendChild(div2);

    }, {
      passive: false
    });
</script>

The live example is here: https://jsfiddle.net/fmbe1yyd/

Obviously you have to change the code to insert dynamic data, so if you have difficulties to make it work, explain better your issue, for example from where you get the input used to populate the elements that you want to create?

[Nicht]

Thank you very much
I just tried it out but it doesnt seem to work somehow i copied everything youve written but its not even starting the function for me :(

[RobinR]

I'm not sure what you're doing wrong, but when I checked fiddle code in the console that 'cereal' wrote for you, it totally works. I can't attach a screenshot, but this is the html that his/her code returns -- which is the resulting HTML you say you want in your post. Go to the Developer Tools in Chrome and open the console, see what kind of errors you are getting and post them here. Maybe someone can help you :)

  <button id="button">Add</button> <div id="box"
     ><img src="http://lorempixel.com/400/200/sports/"> <div class="value">$87.03</div> <div class="subtext">Some text</div> </div> 

[Nicht]

Uncaught TypeError: Cannot read property 'addEventListener' of null
When I make a new file and add everything from jsfiddle it work perfectly

[cereal]

@Nicht

can you share your code? thank you :)

[Nicht]

It's the exact same thing as yours i copied it into the js file and it didnt work but in a new file it does and there arent any errors

[Nicht]

Ok i solved it now i didnt wrote the script part at the bottom of the html. it couldnt find a button because it didnt existed yet

[RobinR]

@Nicht

Glad you figured out the problem with your code -- it's how we all learn! You say you're fairly new to programming. Copy and pasting is fine, but also try to understand what the code solution is doing that 'cereal' wrote for you. His code is clean, literal and annotated to help you understand, imho.