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>
1 answers
solution1
6 ACCPTED 2019-01-11 21:40:42
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.