right positions of created textareas

[mudoeb]

i have such code
<script>
function check()
{
str = document.getElementById("text").innerHTML;
array = str.split("\n");

for(i=0;i<array.length;i++)
{
txtar = document.createElement('textarea');
txtar.setAttribute("name","mytextarea");
txtar.setAttribute("cols","10");
txtar.setAttribute("rows","2");
txtar.setAttribute("wrap","PHYSICAL");
txtar.name='textar[]';
txtar.innerHTML = array[i];
document.getElementById("textareas").appendChild(txtar);
}

}
</script>

<form method="post" action="1.php">

<textarea id="text" name="text"></textarea>
<input type="button" onclick="check()" value="push_me" />
<div id="textareas"><br><br></div>
<input type="submit" value="send" name="send" />

</form>

i'd like to know how to put new textareas into the right place of the page

for example i want them to appear inside the table in the right side of the page
textareas must be inside <tr> tags so they could go one by one - vertically

P.S. how to remove concrete textarea (which is dynamicly created) without removing others ?

[Kor]

1. This is rather a CSS problem. Think backwards. Write HTML a div, or a table and try to place real HTML textareas in the position you like, on using CSS. When you finish, delete the HTML textarea elements and append the new created textareas in those places.
2. To remove when? To do something in javascript you need an event, following the user's action. Now what the user suppose to do to delete an element? Click on a button? Then create and append those buttons as well.

[mudoeb]

Now what the user suppose to do to delete an element? Click on a button? yes
for example user created 20 textareas, every textarea has a button, clicking on it will remove textarea
Write HTML a div, or a table and try to place real HTML textareas in the position you like
i dont know the exact number of textareas, may be it will be 5 of them, may be 100

right positioning of textareas must be "on the fly"

[rnd me]

function kill(tr) {
tr.parentNode.removeChild(tr);
}


//removes first one added
kill(document.getElementById("textareas").getElementsByTagName("textarea") [0] )

[mudoeb]

buttons under dynamicly created textareas don't close them (they must remove textareas, theirselve, and <br>'s (the whole section must be removed))
where is mistake ? help plz

<script>

function check()

{

str = document.getElementById("text").value;

array = str.split("\r\n");

for (i=0; i<array.length; i++)

{

var newElem=document.createElement('div');
newElem.setAttribute('id','dt');
document.body.appendChild(newElem);



txtar = document.createElement('textarea');
txtar.setAttribute("name","mytextarea");
txtar.setAttribute("cols","10");
txtar.setAttribute("rows","2");
txtar.innerHTML = array[i];

document.getElementById("textareas").appendChild(txtar);



document.getElementById("textareas").appendChild(document.createElement('br'));
document.getElementById("textareas").appendChild(document.createElement('br'));



but = document.createElement('button');
but.setAttribute("value","Button");
but.setAttribute("onclick","del_b()");

document.getElementById("textareas").appendChild(but);



document.getElementById("textareas").appendChild(document.createElement('br'));
document.getElementById("textareas").appendChild(document.createElement('br'));



var newElemClose=document.createElement('/div');
document.body.appendChild(newElemClose);

}

}



function del_b()

{
// document.getElementById('dt').innerHTML = '';

txtar.parentNode.removeChild(txtar);
}

</script>



<form method="post" action="1.php">

<textarea id="text" name="text"></textarea>
<input type="button" onclick="check()" value="Start">

<table width=100%>
<tr>
<td width=50%></td>
<td width=50%><div id="textareas"></div></td>
</tr>
</table>

<input type="submit" value="Send" name="send">

</form>

[Kor]

In a textarea value you can not append tags like <br>. You should work, same as for all the form's elements, with its value attribute.

document.body is not quite a correct reference for a browser in strict mode. Maybe document.getElementsByTagName('body')[0]...

What is this?

var newElemClose=document.createElement('/div');

You don't need to create the end tags. When you create an element in DOM, automatically you have its end tag as well

[Kor]

Have a look:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
/*<![CDATA[*/
onload=function(){
var parent=document.getElementsByTagName('body')[0];
var div=document.createElement('div');
var divtext=document.createTextNode('this is a text in a div');
div.appendChild(divtext);
parent.appendChild(div);
alert(parent.innerHTML);
}
/*]]>*/
</script>
</head>
<body>
</body>
</html>

[mudoeb]

You don't need to create the end tags. When you create an element in DOM, automatically you have its end tag as well
and how this end tags will be put to the exact place (if i have large auto generated code) ?

so what about my code ? could you pkease show how to delete auto generated sections with textareas+<br>'s+buttons

[Kor]

Sir, you create an element. When so, it's end tag is automatically created. Now, if you want to nest another element inside, as a child, simply create it and append it to the former element. And so on. Simple.

[Kor]

Once again, have a look at a basic example to create and append a table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload = function(){
var norows=5;
var nocells=3;
var parent=document.getElementById('mydiv');
var table=document.createElement('table');
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<norows;i++){
row=document.createElement('tr');
for(var j=0;j<nocells;j++){
cell=document.createElement('td');
cell.style.border='solid 1px #ccc';
cell.appendChild(document.createTextNode('row '+i+' cell '+j))
row.appendChild(cell)
}
tbo.appendChild(row)
}
table.appendChild(tbo);
parent.appendChild(table);
alert(parent.innerHTML)
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

[mudoeb]

listen, just tell me plz, what is my mistake ? (dynamicly created buttons don't remove textareas, theirselves and <br>'s)

<script>

<script>

function check()

{

str = document.getElementById("text").value;

array = str.split("\r\n");

for (i=0; i<array.length; i++)

{

var new_div = document.createElement("div");
new_div.Id = 'new_div_id';
document.getElementById("textareas").appendChild(new_div);



var txtar = document.createElement('textarea');
txtar.name = 'mytextarea';
txtar.cols = '20';
txtar.rows = '2';
txtar.innerHTML = array[i];

document.getElementById("textareas").appendChild(txtar);



document.getElementById("textareas").appendChild(document.createElement('br'));
document.getElementById("textareas").appendChild(document.createElement('br'));



var but = document.createElement('button');
but.value = 'Button';
but.onclick = 'del_all()';

document.getElementById("textareas").appendChild(but);



document.getElementById("textareas").appendChild(document.createElement('br'));
document.getElementById("textareas").appendChild(document.createElement('br'));

}

}



function del_all(sTxtId)
{
document.getElementById("new_div_id").removeChild(document.getElementById(sTxtId));
}

</script>



<form method="post" action="1.php">

<textarea id="text" name="text"></textarea>
<input type="button" onclick="check()" value="Start">

<div id="textareas"></div>

</form>

[Kor]

1.

but.onclick = 'del_all()';

You can not call a function like that. Functions belong to the window object, thus it should be either:

but.onclick=del_all;

or, if you need to pass arguments, you could use an anonymous :

but.onclick=function(){del_all(argument)}


2. If you want to remove from a single shot the textarea, the button and the breaks, you should have nested them, from the beginning, in a common created parent, a neutral DIV, and remove that DIV.

3. innerHTML is not a wise choice to populate a textarea. Same as all the form's elements, textarea has a value attribute.

[mudoeb]

problem solved, tnx