PDA

View Full Version : issue on innerHTML



carlitos_way
Mar 14th, 2007, 01:38 PM
hi all, while working on a form i noticed a problem with innerHTML, i'll try to show you:

inside a form, i have an element(textfield) that can be present one or more times. so i added a button that adds or remove to the form that element.
now, if first i add the element, modify it writing anything, at then add another one, the data i entered on the first are cancelled.
i really don't understand why this happens... can you explain me or tell me something to read about it?

shyam
Mar 14th, 2007, 04:22 PM
i think the phase of the moon is not right for innerHTML this time...

without a sample u are going to have everyone shooting in the dark

carlitos_way
Mar 14th, 2007, 04:48 PM
i think the phase of the moon is not right for innerHTML this time...

:D

ok this is my code:


var strElement = "<tr><td nowrap>Anno Impegno&nbsp;</td><td nowrap><input id='intAImp' name='intAImp' type='text' size='10' maxlength='10' style='width: 100px' value=''></td></tr>";

function addElement() {
var e = document.getElementById("target");
e.innerHTML += strElement;
}


and this is what happens:


addElement num. 1
modify the value of element num. 1
add element num. 2


after the second add, the value of element num.1 is lost :( !!!!

i just was curious to know/understand why....

shyam
Mar 14th, 2007, 04:57 PM
weird... i tried

<html>
<head>
<script type="text/javascript">
var strElement = "<tr><td nowrap>Anno Impegno&nbsp;</td><td nowrap><input id='intAImp' name='intAImp' type='text' size='10' maxlength='10' style='width: 100px' value=''></td></tr>";

function addElement() {
var e = document.getElementById("target");
e.innerHTML += strElement;
}
</script>
</head>
<body>
<button onclick="addElement()">Add</button>
<div id="target"></div>
</body>
</html>
where the text-field values are maintained in IE but is cleared in FF

Tried changing the div to a table IE gives an error but works in FF but the text-field still gets cleared

_Aerospace_Eng_
Mar 14th, 2007, 05:35 PM
You shouldn't be using innerHTML to create elements. You should be using DOM. It may be longwinded but its the correct way to do what you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var i = 0;
function addElement() {
var createTR = document.createElement('tr');
var createTD = document.createElement('td');
var createTDText = document.createTextNode('Anno Impegno&nbsp;');
createTD.appendChild(createTDText);
var createTD2 = document.createElement('td');
var createInput = document.createElement('input');
createInput.setAttribute('id','intAImp'+i);
createInput.setAttribute('name','intAImp'+i);
createInput.setAttribute('type','text');
createInput.setAttribute('size','10');
createInput.setAttribute('maxLength','10');
createInput.style.width = 100 + 'px';
createTD2.appendChild(createInput);
createTR.appendChild(createTD);
createTR.appendChild(createTD2);
document.getElementById('inputhold').appendChild(createTR);
alert(document.getElementById('inputhold').innerHTML);
i++;
}
window.onload = function()
{
var createTable = document.createElement('table');
createTable.setAttribute('id','inputhold');
document.getElementById('target').appendChild(createTable);
}
</script>
</head>
<body>
<button onclick="addElement()">Add</button>
<div id="target"></div>
</body>
</html>
I don't have IE for PC available to me so I can't test it there. I tested it in Firefox, Opera, Netscape, and Safari for Mac.

carlitos_way
Mar 15th, 2007, 11:16 AM
You shouldn't be using innerHTML to create elements. You should be using DOM. It may be longwinded but its the correct way to do what you want.

ok, i'll follow your suggestion. in fact i saw that using DOM i didn't get any error like the previous ones in FF.


I don't have IE for PC available to me so I can't test it there. I tested it in Firefox, Opera, Netscape, and Safari for Mac.

in fact, this code doesn't work for IE :D
i'll have to write different code for the browsers, i suppose.

Kor
Mar 15th, 2007, 11:26 AM
It is weird that a skilled programmer as _Aerospace_Eng_ forgot that in javascript TBODY is required, thus a TR should be appended to the TBODY, not directly to the TABLE element...

shyam
Mar 15th, 2007, 03:39 PM
You shouldn't be using innerHTML to create elements. You should be using DOM. It may be longwinded but its the correct way to do what you want.

I've found that innerHTML is pretty useful if u are not dealing with form elements...anyways i'm a sucker for cloning rather than producing my own ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
var templateTr;
var i = 0;
function addElement() {
var newTr = templateTr.cloneNode(true);
var input = newTr.getElementsByTagName('input')[0];
input.setAttribute('id', 'intAImp' + i);
input.setAttribute('name', 'intAImp' + i);
tbody(document.getElementById('target')).appendChild(newTr);
i++;
}
function tbody(table) {
return table.getElementsByTagName('tbody')[0];
}
window.onload = function()
{
var table = document.getElementById('target');
templateTr = table.getElementsByTagName('tr')[0];
templateTr = tbody(table).removeChild(templateTr);
}
</script>
</head>
<body>
<button onclick="addElement()">Add</button>
<table id="target">
<tr>
<td nowrap>Anno Impegno&nbsp;</td>
<td nowrap>
<input id='intAImp' name='intAImp' type='text' size='10' maxlength='10' style='width: 100px' value=''>
</td>
</tr>
</table>
</body>
</html>

Kor
Mar 15th, 2007, 03:50 PM
innerHTML is useful when you are dealing with small "amount" of things to add. It is faster than DOM. But the main disadvantage of innerHTML is that it does not really insert elements into the DOM tree, so that later, if you need to refer an element added with innerHTML, you can't, at least not with DOM compliant browsers. For simply adding something, innerHTML method is bright, that is why the modern other browsers than IE use it right now (even it is an IE method only, not a DOM recommended one). Well...

_Aerospace_Eng_
Mar 15th, 2007, 04:32 PM
See I knew I forgot something. Here is the same code if you need to create the table dynamically rather than have something there already.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var i = 0;
function addElement() {
var createTR = document.createElement('tr');
var createTD = document.createElement('td');
var createTDText = document.createTextNode('Anno Impegno ');
createTD.appendChild(createTDText);
var createTD2 = document.createElement('td');
var createInput = document.createElement('input');
createInput.setAttribute('id','intAImp'+i);
createInput.setAttribute('name','intAImp'+i);
createInput.setAttribute('type','text');
createInput.setAttribute('size','10');
createInput.setAttribute('maxLength','10');
createInput.style.width = 100 + 'px';
createTD2.appendChild(createInput);
createTR.appendChild(createTD);
createTR.appendChild(createTD2);
document.getElementById('inputhold').appendChild(createTR);
alert(document.getElementById('inputhold').innerHTML);
i++;
}
window.onload = function()
{
var createTable = document.createElement('table');
var createTBody = document.createElement('tbody');
createTBody.setAttribute('id','inputhold');
createTable.appendChild(createTBody);
document.getElementById('target').appendChild(createTable);
}
</script>
</head>
<body>
<button onclick="addElement()">Add</button>
<div id="target"></div>
</body>
</html>

carlitos_way
Mar 15th, 2007, 04:41 PM
thank you very much for your efforts, i resolved it just studying a bit of DOM...

but now i have another thing that struggles me: removing the table i just inserted:


var ti = document.getElementById('targetImpegno');
var tables = ti.getElementsByTagName('table');
var tmp = ti.removeChild(tables[tables.length]);
ti.appendChild(tmp);

i get an exception, do you have any quick suggestion?

Kor
Mar 15th, 2007, 05:30 PM
once again.. you need to create a TBODY element and to append any TR to it.