dynamic/javascript: div in div = 3 divs..!?

20/11/2009 - 02:19 von .rhavin grobert | Report spam
<html><head>
<meta http-equiv="Content-Type" content="text/html;
<script type="text/javascript" >

//
function test()
{
// basically, this fn parses for 'qsel'-tags (a placeholder) and
// *should* replace them whith a div-contianer containing another
// div and a select-element. to see whats going on, we fill the
// textarea with the result of that process and also do some fancy
// coloring to show the ** THREE ** (!?!) divs resulting.

var qualsGroup = document.getElementsByTagName("qsel");

var cnt = qualsGroup.length;
while (cnt-->0)
{
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;

// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);

// we set up a new selector with the dummys id
// and fill it with a test-option.
var qsel = document.createElement('select');
qsel.name = qid;
qsel.id = qid;
qsel.zIndex = zIndex + 1;
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;
qsel.style.background = 'transparent';
qsel.style.width = '400px';

// this is our container-div; it should contain one
// additional div and a selector
var qselCont = document.createElement('div');
qselCont.style.display = 'inline';
qselCont.style.border = '2px solid #00f';
qselCont.style.padding = '10px';
qselCont.style.background = '#555';
qselCont.zIndex = zIndex;
qselCont.id = qid + '_c';

// this is the other div inside the container
var qselFlow = document.createElement('div');
qselFlow.style.border = '1px solid #f00';
qselFlow.style.width = '80px';
qselFlow.style.height = '40px';
qselFlow.style.background = '#77F';
qselFlow.id = qid + '_f';


// now we append the flow-div and the selector
// to our container-div
qselCont.appendChild(qselFlow);
qselCont.appendChild(qsel);

// and append our container to the parent
// of our placeholder
parent.appendChild(qselCont);
}

// we fill the textarea with the resulting html
document.getElementById('rs').value document.body.parentNode.innerHTML;
return true;
}

</script>

</head><body onload="test()">

<p>test a1 <qsel id="a1" /></p>
<textarea id="rs" cols="100" rows="50"></textarea>

</body><html>
 

Lesen sie die antworten

#1 RobG
20/11/2009 - 05:25 | Warnen spam
On Nov 20, 11:19 am, ".rhavin grobert" wrote:
<html><head>



Assuming HTML 4.01.


<meta http-equiv="Content-Type" content="text/html;



There's no need to confuse things with XML-style markup, just use
plain HTML 4.01.

<script type="text/javascript" >

//



Be careful with wrapping when posting, others should be able to copy
and paste your code without having to fix errors introduced by auto-
wrapping. Manually wrap lines at about 70 characters, check that the
code can be copy and pasted without additional errors.


function test()
{
// basically, this fn parses for 'qsel'-tags (a placeholder) and



It doesn't seem to "parse" anything. It uses getElementsByTagName to
collect elements with an invalid tag name, then uses the properties of
those elements for properties of DOM elements.


// *should* replace them whith a div-contianer containing another
// div and a select-element. to see whats going on, we fill the
// textarea with the result of that process and also do some fancy
// coloring to show the ** THREE ** (!?!) divs resulting.

var qualsGroup = document.getElementsByTagName("qsel");



It is a bad idea to use non-standard markup to store data as values
and properties. If you want to store data, use a javascript object.


var cnt = qualsGroup.length;
while (cnt-->0)



That would be better as:

while ( cnt-- )

{
var qid = qualsGroup[cnt].id;
var parent = qualsGroup[cnt].parentNode;
var zIndex = qualsGroup[cnt].zIndex;

// to free the id, we remove the placeholder
parent.removeChild(qualsGroup[cnt]);



There is no need to set the ID of that element in the first place,
just set the id and name of the new element directly.

[...]
var opt = new Option;
opt.value = '1';
opt.text = 'test-1';
qsel.options[0] = opt;



Those four lines could be:

qsel.options[0] = new Option('1', '1');


qsel.style.background = 'transparent';
qsel.style.width = '400px';

// this is our container-div; it should contain one
// additional div and a selector
var qselCont = document.createElement('div');
qselCont.style.display = 'inline';



Would a span element do the job?

[...]

// we fill the textarea with the resulting html
document.getElementById('rs').value > document.body.parentNode.innerHTML;



It is not a good idea to write HTML markup to a textarea element's
innerHTML property, especially if the text contains (or might contain)
markup. Use the (standards compliant) value property.

return true;



Why?


Rob

Ähnliche fragen