更改脚本以在div中输入文本，而不是textarea

Question

I'm working on a job with a developer who is taking care of coding that's beyond my ability; mostly PHP and more complex Javascript (I'm only okay at jQuery).

Part of the work the developer has been doing involves checking a database and dynamically entering results into the page. The problem is that currently these results are entered into a <textarea> , which is not ideal as it means that if it's readonly, the results cannot be deleted if the user changes their mind. If it's not readonly, the user can enter any text they like into the textarea, rendering the page unusable. In addition, I'm unable to apply any CSS to the results within the textarea.

Also, the developer is using tables, one of my pet hates.

I would like the <textarea> to be instead a <div> containing a <div> for each database result found.

The developer is currently away for a few weeks and I would prefer to get this done sooner rather than later. I've tried changing "td" simply to "div" but obviously that didn't work.

I'd really appreciate some help. I've included the code below. Unfortunately, I'm unable to give access to the live/testing site (beyond my control) and apologise for that.

if(answer)
{

var newRow = document.getElementById("target_table");
var Row = newRow.rows.length;   
var row1 = newRow.insertRow(Row);
var index=row1.rowIndex;
var td1= document.createElement("TD")
var td2= document.createElement("TD")
td2.innerHTML =  "

<INPUT TYPE='hidden' NAME='course"+Row+"' id='course"+Row+"' value='"+answer+"'>
<INPUT TYPE='hidden' NAME='ary"+Row+"' id='ary"+Row+"'>
<INPUT TYPE='hidden' NAME='Dary"+Row+"' id='Dary"+Row+"'>
<p class='courseName'>"+answer+"</p>
<div id='boxRw"+Row+"' class='boxyHolder'>

    <TABLE border=1 cellspacing=2>
        <TR>
            <TD>
                <INPUT TYPE='button' name='Add a favourite to this course' value='Add a favourite to this course' onclick='javascript: window.open(\"<?=$path?>add-my-favourites/"+Row+"\",\"mywindow\",\"left=550,top=200,width=400,height=350,toolbar=1,resizable=0\");'>
            </TD>
        </TR>
        <tr>
            <td colspan=2>
                <TABLE border=1>
                    <TR>
                        <TD valign=top>Favourites:</TD>
                        <TD>
                            <TEXTAREA class='fav-box' NAME='reps"+Row+"' id='reps"+Row+"' ROWS=4 COLS=45></TEXTAREA>
                            <input class='fav-box' TYPE='hidden' NAME='repsId"+Row+"' id='repsId"+Row+"' value=''>
                        </TD>
                    </TR>
                </TABLE>
            </td>
        </tr>

    </TABLE>

</div>"; 

row1.appendChild(td1);
row1.appendChild(td2);

document.getElementById("h").value=Row;
}

function setVal(){
    var r = "<?=$_GET['hVal']?>";
    var y = "reps"+r;

    var y1 = "repsId"+r;

    window.opener.document.getElementById(y).value+=document.frm.favourites.value+',';
    window.opener.document.getElementById(y1).value+=document.frm.recp_listId.value+',';
    window.close();
}

Edit: I believe these are the lines I need to change:

window.opener.document.getElementById(y).value+=document.frm.recipes.value+',';             

window.opener.document.getElementById(y1).value+=document.frm.recp_listId.value+',';

I think the problem is that these lines are adding the value to what is currently a <textarea> . When I change the textareas to divs, the values are not applied to the divs. So I need to change the code so that it enters the results as text in the divs - not values.

Answer 1

If you use a div , use its textContent property, not value like you'd use for form controls such as textarea and input . You are getting no error because you're ending up creating a value property on the div .

---

Code snippet #1

var div = document.createElement('div');
div.textContent = document.frm.recipes.valu‌​e;
window.opener.document.getElementById(y).appendChild(div);