View Full Version : [DHTML] DOM_b_input - HTML elements generation script creation Wizard

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 */

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


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

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 :-\

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.

09-10-2006, 03:25 PM
Nice, very useful thing. Just one "bug" :p, when making a form element with method attribute then script generates a thing like:

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.

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.

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.

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:


09-11-2006, 11:09 AM
This is turning into quite a useful tool!

09-11-2006, 02:19 PM
Ooh thanks, jscheuer1, now I will never have to search any generator like this in google for hours. Thanks again!!!

09-20-2006, 06:42 PM
Check html2dom.com

09-20-2006, 07:11 PM
Er... just as a point of interest, whence did "DOM_b_input" come? :)

09-21-2006, 05:42 AM
Er... just as a point of interest, whence did "DOM_b_input" come? :)

I'm so glad you asked me that. When I titled this script only God and I knew why, now only God knows. :)

Seriously though, it was originally an external script that you put the external call for on your page. After doing so and refreshing the page, it would write out a script to recreate the body of that page using the DOM and append a textarea to the page containing that script.

Hence the name was at that point, DOM_b - for Document Object Model Body script. However, there was much grumbling on both sides of a debate ranging over the abuses such a utility would inevitably be put to (Mike championed that cause) and those who wanted a user input interface and preview feature (shachi and blm126). I caved in totally to the second camp and hoped that, since it was now less likely that it would be used for entire pages worth of code, that Mike would be somewhat assuaged as well. The heart of the script was still basically the same though, ergo: DOM_b_input.

09-21-2006, 02:57 PM
Nice to find out about it's history jscheuer1. :)