Confused creating a HTML divs using Javascript

Question

I'm writing a code where in there is a json given and out of the key value pairs of json I need to create HTML divs.

Here is my HTML

<div id="col-md-12">

</div>

<input type="button" onclick="addDivs()" />

and my JS

        function addDivs() {
          var jsonInput = {
            'a': '1',
            'b': '2'
          }
          var colDiv = document.getElementById("col-md-12");
          var row = document.createElement("div");
          row.className = "row";
          Object.keys(jsonInput).forEach(function(k) {
            var string = k;
            var range = jsonInput[k];
            var col4Div = document.createElement("div");
            col4Div.className = "col-md-4 icon-plus";
            var alcohol = document.createElement("span");
            alcohol.className = string;
            var strong = document.createElement("strong");
            strong.innerHTML = string;
            var dropDownArrow = document.createElement("span");
            dropDownArrow.className = "down-arrow";
            alcohol.innerHTML = strong;
            alcohol.innerHTML = dropDownArrow;
            alcohol.innerHTML = "<br/>";
            alcohol.innerHTML = range;
            col4Div.innerHTML = alcohol;
            row.innerHTML = col4Div;
          });
          colDiv.innerHTML=row;
        }

when I click the button, it gives me message as [object HTMLDivElement] and in console it shows no error.

I'm really confused on what's going on in the backend. My expected output is

<div class="col-md-12">
         <div class="row">
            <div class="col-md-4 icon-plus">
               <span class="a">
               <strong>a</strong>
               <span class="down-arrow"></span>
               <br /> 1</span>
            </div>
            <div class="col-md-4 icon-plus">
               <span class="b">
               <strong>b</strong>
               <span class="down-arrow"></span>
               <br /> 2</span>
            </div>
         </div>
      </div>

please let me know where am I going wrong and how can I fix it.

Here is a working fiddle. https://jsfiddle.net/p9e7cLg9/1/

Thanks

Nothing is going on in the backend, everything is on front end. If JSON was received with success, that's it, backend has done it's job, so you don't have to focus your debugging towards there for sure. And your mock fails, meaning problem is in it. — CodeSmith
– CodeSmith, Commented Jan 2, 2018 at 13:57
I am not sure even how output should look like, your transform code is a mess, mixing DOM nodes with text (strings). But it shoudl go along the lines of: var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); — CodeSmith
– CodeSmith, Commented Jan 2, 2018 at 14:02

Quentin · Accepted Answer · 2018-01-02 13:58:19Z

1

innerHTML deals in strings (of HTML source code). createElement deals in DOM nodes.

When you convert a DOM node to a string, you get "[object HTMLDivElement]", which isn't useful, so don't do that.

Use the appendChild method to add a DOM node as a child of an existing HTML element.

answered Jan 2, 2018 at 13:58

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3872094 Over a year ago

Thanks for the quick tip. but a small question, here I'm creating divs on the go, for ex. I created div1, then div2 (both using JS), in this case, will appendChildwork?

Quentin Over a year ago

@user3872094 — Better than just assigning things with innerHTML would.

Collectives™ on Stack Overflow

Confused creating a HTML divs using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related