I am new to programming and including JS and HTML. The course was given a task and I can not figure out how to cope with it.

In an empty HTML file (without using any tags in the body ), output a 3x3 table with the letters inside using a script. I can make a table in the body , but I do not understand how to insert it into the script and display it on the screen. Someone can explain or give direction.

I approximately understand that I need to use documents.body.innerHTML = ""; But I do not understand how to use it.
Here is the table code:

 <table border=1 id="1"> <tr> <th> A </th> <th> B </th> <th> C </th> </tr> <tr> <th> D </th> <th> E </th> <th> F </th> </tr> <tr> <th> H </th> <th> I </th> <th> G </th> </tr>

    2 answers 2

    The answer, in fact, can range from a simple to multi-line explanation.

    Simple option:

     window.onload = function(){ let template = `<table border=1 id="1"> <tr> <th> A </th> <th> B </th> <th> C </th> </tr> <tr> <th> D </th> <th> E </th> <th> F </th> </tr> <tr> <th> H </th> <th> I </th> <th> G </th> </tr>`; document.body.innerHTML = template; }

    The script is inserted into the head tag like this:

     <head> <script> // Тут как раз скрипт </script> </head>

    More complex, also using Javascript , but using document.createElement , appendChild , append / prepend, before / after, replaceWith and other methods of working with DOM

     function tableCreate() { var body = document.getElementsByTagName('body')[0]; var tbl = document.createElement('table'); tbl.setAttribute('border', '1'); var tbdy = document.createElement('tbody'); var letterCount = 0; for (var i = 0; i < 3; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 3; j++) { var td = document.createElement('td'); var t = document.createTextNode(String.fromCharCode(65 + letterCount++)); td.appendChild(t); tr.appendChild(td) } tbdy.appendChild(tr); } tbl.appendChild(tbdy); body.appendChild(tbl) } tableCreate(); 
     td { width: 50px; height: 50px; text-align: center; }

      it is possible with the help of concatenation which is in some situations the addition operator plus "+" and using the screening "\"

       <script> document.body.innerHTML = "<table border=1 id=\"1\">" + "<tr>" + "<th> A </th>" + "<th> B </th>" + "<th> C </th>" + "<\/table>" </script>

      you can connect the script in two ways, or you can write the <script> cod </script> and write code in it or connect the file with the js extension and specify the path to it

       <script src="../../../home/desktop/main.js"></script>

      here is a more complicated option

       <script> var a = 'A' var b = 'B' var c = 'C' document.body.innerHTML = "<table border=1 id=\"1\">" + "<tr>" + "<th>" + a + "</th>" + "<th>" + b + "</th>" + "<th>" + c + "</th>" + "<\/table>" </script>