[DHTML] DOM_b_input - HTML elements generation script creation Wizard

**jscheuer1** · 09-10-2006, 07:51 AM

1) CODE TITLE: DOM_b_input - HTML elements generation script creation Wizard

2) AUTHOR NAME/NOTES: jscheuer1

3) DESCRIPTION: An external script which, when added to your page, turns it into an HTML elements generation script creation Wizard. The wizard can be used to paste or type in any valid HTML code. When you press the 'domit' button, it will create a script for you that can be used 'as is' to generate and append said elements to a page via the DOM.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/DOM_b_input.js

Demo: http://home.comcast.net/~jscheuer1/side/dom_b.htm

You can make your own:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> 
<body> 
<script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/DOM_b_input.js">
/*DOM_b_input - HTML elements generation script
 *creation Wizard © John Davenport Scheuer
 *Visit http://www.dynamicdrive.com/forums
 *user name:jscheuer1 - This notice must remain for legal use */
</script>
</body>
</html>

Annotated version of script code posted here (in two parts):

http://www.dynamicdrive.com/forums/s...sion#post52536

or, ATTACHED BELOW (see #3 in guidelines below):

**Twey** · 09-10-2006, 12:57 PM

Ah, you did it. Very nice, I had a go and ended up forgetting I had it open in the JSDE in another tab :-\

**blm126** · 09-10-2006, 02:06 PM

This looks familiar...Anyway a suggestion. How about a preview box. It need not be be anymore than the HTML dumped into a div.

**DimX** · 09-10-2006, 03:25 PM

Nice, very useful thing. Just one "bug"

, when making a form element with method attribute then script generates a thing like:

Code:

form_node_1.setAttribute("method", "get", 0);
form_node_1.setAttribute("method", "get", 0);

... so it sets the method attribute twice.

Oh and I'm talking about Opera, in IE it's fine.

**jscheuer1** · 09-10-2006, 04:39 PM

Thanks folks but, there are some more problems that have come to my attention. As far as I can tell so far, only FF seems to work well with this script under all types of markup tested, Opera a close second but, IE continues to amaze with new bugs. So, since it is a useful developer's tool, I will leave it up for now but, with the proviso that the preferred browser for generation is FF.

**jscheuer1** · 09-11-2006, 02:32 AM

OK, I've solved some more of the problems with IE so I now think that this will work as a general utility. What was happening was that IE 'invents' all sorts of attributes for elements that aren't coded for them and reports the default values for these. This wouldn't do any real harm except that many of these defaults are unrealistic, like height and width 0 for a checkbox, which makes it disappear. The fix was to check the attributes object's name collection against the element's outerHTML minus its innerHTML.

I've also put in a fix for Opera with the method attribute for forms. It may cause other problems but, I think it has a good chance of not doing so. The problem is that Opera simply reports the method attribute of a form tag twice in its attributes object. Fortunately, the second one appears to always be the last item in the object unless it is undeclared, in which case the ENCTYPE is 'invented' and made to be last, and that is almost never declared in the code. So it should work out to do what I've done, which is to remove the last iteration through the attributes object in Opera if the tag is a form tag.

I added a refinement where if an atribute's value was a number or true/false, it was getting added as an attribute value string in the generated script, now it is as a literal, as it should be.

About a preview, just paste the code into the head of an otherwise blank page and view it in the browser. No 'preview function' could be as accurate as that unless the code could be written to a pop up window but, that has several potential problems. I will look into that though.

**jscheuer1** · 09-11-2006, 06:49 AM

OK, the preview option is now included, easier than I thought, as well as the fixes from my last post. Demo and code file are still in the same locations. Demo:

http://home.comcast.net/~jscheuer1/side/dom_b.htm