innerHTML fails

Question

Text does not appear on the page. There are no errors in the console. What is the problem?
page.html:

<!DOCTYPE html> <html> <head> <title>Javascript</title> <meta charset="utf-8"> <script src="script.js"></script> </head> <body> <script type="text/javascript">photoInsert();</script> </body> </html>

script.js:

 function photoInsert() { var number = 1, box, boxname ='box'+number; box = document.createElement("div"); box.id = boxname; box.innerHTML = '<p>TEXT</p>'; alert('ok'); }

Grundy grundy 58.6k 7 golden marks 54 silver marks 95 bronze marks · Accepted Answer · 2016-07-09T09:56:43

The problem is that the created element is not added to the page, if you add it, you can see the result. You can use the appendChild function to insert.

 function photoInsert() { var number = 1, box, boxname = 'box' + number; box = document.createElement("div"); box.id = boxname; box.innerHTML = '<p>TEXT</p>'; document.body.appendChild(box); } photoInsert()

Perhaps the question is ridiculous, but if the "innerHTML" method does not add an element to the page, what does it do at all?
Didn't the code "<p> TEXT </ p>" become part of the page and not located inside the created div?
@AlexeyLyulenkov, as the name suggests for the innerHTML property, is responsible for what lies inside the element.
The element in this case is the box that is being created.
After creation, it has nothing to do with the DOM tree, which is shown by the browser, so that it also starts to show, you need to add it to this tree

innerHTML fails

1 answer 1

More articles: