How to create elements, set attribute, use innerHTML, and appendChild with JS and DOM

Question

I am writing a sample program in HTML/JS to demonstrate creating an array of user-defined objects (property/value), creating an element, adding data from the object array using innerHTML, and then appending the newly filled element to print it using appendChild();

For some reason, running the program provides no output besides what I hard-code as debugging. View source is also not very helpful given the language.

Please forgive me for the simple question, I am new to JS and have spent many hours reading many resources - I feel I am probably missing something small.

Thank you!!

<title>
This is my title.
</title>

<body>
<p>xXx<br/></p>
<script>

var array = new Array();

var thing1 = {
property: "value-1"
};

        var thing2 = {
        property: "value-2"
        };


        array.push(thing1);
        array.push(thing2);

        for (index = 0; index < array.length; ++index) {

            test_el = document.createElement("p");

            test_el.innerHTML(array[index].property);

            document.body.appendChild(test_el);

        };
        //I wish to print 'value' text into the body from my object, that is all

</script>
</body>

Your variable is test_el, but you're appending text_el. I imagine that would throw an error in console though? — Tyler Roper
– Tyler Roper, Commented Jan 11, 2019 at 21:30
Ah - thanks! Good eye. Unfortunately - I still get a blank screen after fixing. This should be pretty simple to run, no? — BenP
– BenP, Commented Jan 11, 2019 at 21:33
Have you looked at your console? You have an error: "Uncaught TypeError: test_el.innerHTML is not a function". You change an element's HTML by doing .innerHTML = ..., not innerHTML( ... ). — Tyler Roper
– Tyler Roper, Commented Jan 11, 2019 at 21:34
I did not know I could do that! Got it working. I LOVE YOU MAN. — BenP
– BenP, Commented Jan 11, 2019 at 21:38
Console is your best friend! Press F12 while on your page to see it (or CTRL + SHIFT + J in Chrome). You can use console.log(test_el), for example, if you ever want to track the value of something. — Tyler Roper
– Tyler Roper, Commented Jan 11, 2019 at 21:39

Pietro Nadalini · Accepted Answer · 2019-01-11 21:40:42Z

6

Your error seems to be with innerHTML, that is not a function, so you should put that value equal to something. I have corrected your code so you can see the result.

var array = new Array();
var thing1 = {
  property: "value-1"
};
var thing2 = {
  property: "value-2"
};

array.push(thing1);
array.push(thing2);

for (index = 0; index < array.length; ++index) {
  test_el = document.createElement('p');

  test_el.innerHTML = array[index].property;

  document.body.appendChild(test_el);
};

<title>
  This is my title.
</title>

<body>
  <p>xXx<br/></p>
</body>

answered Jan 11, 2019 at 21:40

Pietro Nadalini

1,8303 gold badges17 silver badges34 bronze badges

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

1 Comment

BenP Over a year ago

Yes this, as well as Tyler Roper's response, helped a whole bunch in figuring out my real world program. Thank you!

Collectives™ on Stack Overflow

How to create elements, set attribute, use innerHTML, and appendChild with JS and DOM

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related