Line Brake Inside JavaScript Variable

Hi guys,

I need to insert a line brake after each new part inserted into the variable.

<script type="text/javascript">
          var copytext = [];
        function OnChangeCheckbox (checkbox, containerid)
        {
            if (checkbox.checked)
                {
                    copytext = copytext + document.getElementById(containerid).value + "\n";
                }
            else {
             
                }
        }
 
function myFunction()
{
 
window.alert(copytext);
 
}
</script>
 
    <table>
        <tr><td id="myTd1"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox1');" id="myCheckbox1" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd2"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox2');" id="myCheckbox2" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd3"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox3');" id="myCheckbox3" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd4"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox4');" id="myCheckbox4" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd5"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox5');" id="myCheckbox5" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td><button onclick="myFunction();">Try it</button></td></tr>
    </table>  

Code (markup):

The above code works when displaying the variable on an alert pop up, but when I try using it as follows it still just puts everything next to one another.

        <script type="text/javascript">
var copytext = [];
function OnChangeCheckbox (checkbox, containerid)
        {
            if (checkbox.checked)
                {
                    copytext = copytext + document.getElementById(containerid).value + "\n";
                }
            else {
           
                }
        }
function textc() {
    var form = document.createElement("form", "copy_form");
    form.id = "copy_form";
    //form.method = "post";
    //form.action = "index.php?mode=post_comment";
 
    var reply_place = document.createElement("div");
    reply_place.id = "overlay";
    var inner_div = document.createElement("div");
 
    var button_close = document.createElement("button");
    button_close.id = "upprev_close";
    button_close.innerHTML = "x";
    button_close.onclick = function () {
    var element = document.getElementById('overlay');
    element.parentNode.removeChild(element);
    };
    inner_div.appendChild(button_close);
 
 
    var legend = document.createElement("legend");
    legend.innerHTML = copytext;
    form.appendChild(legend);
 
    var submit_btn = document.createElement("input", "the_submit");
    submit_btn.type = "submit";
    submit_btn.className = "submit";
    submit_btn.value = "Select";
    form.appendChild(submit_btn);
 
    submit_btn.onclick = function () {    };
 
    inner_div.appendChild(form);
    reply_place.appendChild(inner_div);
 
    var attach_to = document.getElementById("wrapper"), parentDiv = attach_to.parentNode;
    parentDiv.insertBefore(reply_place, attach_to);
 
}
</script>
 
<table>
        <tr><td id="myTd1"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox1');" id="myCheckbox1" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd2"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox2');" id="myCheckbox2" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd3"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox3');" id="myCheckbox3" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd4"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox4');" id="myCheckbox4" value="Sample check box" />Sample check box<br/></td></tr>
        <tr><td id="myTd5"><input type="checkbox" onclick="OnChangeCheckbox (this, 'myCheckbox5');" id="myCheckbox5" value="Sample check box" />Sample check box<br/></td></tr>
</table>
<span style="cursor:pointer;cursor:hand;" onclick="textc();">Copy Text!</span>
<div id="wrapper"></div>

Code (markup):

Does anybody have an idea why this is happening?
Could it be something to do with CSS?
Also does anybody know how I can use the

submit_btn.onclick = function () {  
        
    };

Code (markup):

to select all the text that is displayed on the form.

 

Attention to details!

I found out why my "\n" was not working. In the first example I was calling it in Java script and the output of the variable to text was still in the Java script object, but in the second part the output was in a html element so I had to use <br/>. Will teach me to pay more attention.