HTML div oluşturup içine yazı eklemek

<!-- HTML -->



<table border="0" cellpadding="20" cellspacing="3">
    <tr style="color:brown">
            <td>1A</td><td>2A</td>
            <td>3B</td><td>4B</td><td>5B</td><td>6B</td><td>7B</td><td >8B</td><td >8B</td><td>8B</td><td>1B</td><td>2B</td>
            <td>3A</td><td>4A</td><td>5A</td><td>6A</td><td>7A</td><td>8A</td>
    </tr>

<tr>
        <td bgcolor="#33ff99" id="H1" onClick="element_bilgisi()">H<sub>1</sub> </td>
        <td colspan="1"> </td> <td colspan="10"> <div style=" height:120px; background-color: aqua" id="kutucuk1;"> yazıı </div> <td colspan="5"></td><td align="center" bgcolor="#99ffff" id="He2">He<sub>2</sub> </td>
    </tr>

    <tr>
        <td bgcolor="#ff3366" id="Li3">Li<sub>3</sub></td>
        <td bgcolor="#ff9966" id="Be4">Be<sub>4</sub></td>
        <td colspan="10"> </td>
        <td bgcolor="#A6AFA4" id="B5">B<sub>5</sub></td>
        <td bgcolor="#33ff99" id="C6">C<sub>6</sub></td>
        <td bgcolor="#33ff99" id="N7">N<sub>7</sub></td>
        <td bgcolor="#33ff99" id="O8">O<sub>8</sub></td>
        <td bgcolor="#ffff99" id="F9">F<sub>9</sub></td>
        <td bgcolor="#99ffff" id="Ne10">Ne<sub>10</sub></td>
    </tr>
   </table>

<script>
        function element_bilgisi(){
            document.getElementById("H1").innerHTML= "Element özelliği"
        }  
</script>