cworld: Insert Html Using Javascript

Insert Html Using Javascript
<html>
    <head>
        <!-- HTML code to be inserted...
        <div id="dialogLogon">
            <form>
                <div class="hd">Mediaflux Login</div>
                <div class="bd">
                    <label for="labelMFDomain" style="display:block;float:left;width:45%;clear:left;">Domain:</label><input type="textbox" name="MFDomain" style="width:55%"/>
                    <label for="labelMFUser" style="display:block;float:left;width:45%;clear:left;">Username:</label><input type="textbox" name="MFUser" style="width:55%"/>
                    <label for="labelMFPassword" style="display:block;float:left;width:45%;clear:left;">Password:</label><input type="password" name="MFPassword" style="width:55%"/>
                <div style="clear:both"></div>
                </div>
            </form>
        </div>
        -->
        <script>
            // using innerHTML (fast but non-standard method that can be problematical)
            var insert1 = function(){
                _div = document.createElement("div");
                _div.id = "dialogLogon";
                _div.innerHTML ='<form>' + 
                                    '<div class="hd">Mediaflux Login</div>' +
                                    '<div class="bd">' +
                                        '<label for="labelMFDomain" style="display:block;float:left;width:45%;clear:left;">Domain:</label><input type="textbox" name="MFDomain" style="width:55%"/>' +
                                        '<label for="labelMFUser" style="display:block;float:left;width:45%;clear:left;">Username:</label><input type="textbox" name="MFUser" style="width:55%"/>' +
                                        '<label for="labelMFPassword" style="display:block;float:left;width:45%;clear:left;">Password:</label><input type="password" name="MFPassword" style="width:55%"/>' +
                                    '<div style="clear:both"></div>' +
                                    '</div>' +
                                '</form>';
                document.body.appendChild(_div);
            }
            // using DOM standard methods (safe but long-winded)
            var insert2 = function(){
                _div = document.createElement("div");
                _div.setAttribute("id","dialogLogon");
                __form = document.createElement("form");
                _div.appendChild(__form);
                ___divhd = document.createElement("div");
                ___divhd.setAttribute("class","hd");
                ___divhd.appendChild(document.createTextNode("Mediaflux Login"));
                __form.appendChild(___divhd);
                ___divbd = document.createElement("div");
                ___divbd.setAttribute("class","bd");
                ____labelMFDomain = document.createElement("label");
                ____labelMFDomain.setAttribute("for","labelMFDomain");
                ____labelMFDomain.setAttribute("style","display:block;float:left;width:45%;clear:left;");
                ____labelMFDomain.appendChild(document.createTextNode("Domain:"));
                ____inputMFDomain = document.createElement("input");
                ____inputMFDomain.setAttribute("type","text");
                ____inputMFDomain.setAttribute("name","MFDomain");
                ____inputMFDomain.setAttribute("style","width:55%");
                ___divbd.appendChild(____labelMFDomain);
                ___divbd.appendChild(____inputMFDomain);
                ____labelMFUser = document.createElement("label");
                ____labelMFUser.setAttribute("for","labelMFUser");
                ____labelMFUser.setAttribute("style","display:block;float:left;width:45%;clear:left;");
                ____labelMFUser.appendChild(document.createTextNode("Username:"));
                ____inputMFUser = document.createElement("input");
                ____inputMFUser.setAttribute("type","text");
                ____inputMFUser.setAttribute("name","MFUser");
                ____inputMFUser.setAttribute("style","width:55%");
                ___divbd.appendChild(____labelMFUser);
                ___divbd.appendChild(____inputMFUser);
                ____labelMFPassword = document.createElement("label");
                ____labelMFPassword.setAttribute("for","labelMFPassword");
                ____labelMFPassword.setAttribute("style","display:block;float:left;width:45%;clear:left;");
                ____labelMFPassword.appendChild(document.createTextNode("Password:"));
                ____inputMFPassword = document.createElement("input");
                ____inputMFPassword.setAttribute("type","password");
                ____inputMFPassword.setAttribute("name","MFPassword");
                ____inputMFPassword.setAttribute("style","width:55%");
                ___divbd.appendChild(____labelMFPassword);
                ___divbd.appendChild(____inputMFPassword);
                ____divclear = document.createElement("div");
                ____divclear.setAttribute("style","clear:both");
                ___divbd.appendChild(____divclear);
                __form.appendChild(___divbd);
                document.body.appendChild(_div);
            }
        </script>
    </head>
    <body>
        <button onClick="insert1();">insert using innerHTML</button> <button onClick="insert2();">insert using standard DOM methods</button>
    </body>
</html>
page_revision: 0, last_edited: 1216447221|%e %b %Y, %H:%M %Z (%O ago)
Edit Tags History Files Print Site tools + Options
cworld

See the world of IT
