innerHTML fails



  • The text doesn't appear on the page. There's no mistake in the console. What's 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');
    }



  • The problem is that the element created is not added on the page, if added, it will be possible to see the result. For boxing, a function can be used https://developer.mozilla.org/en/docs/Web/API/Node/appendChild

    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()




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2