zhjceltegqta
New Member
Is it alright to define and use custom tags? (that will not conflict with future html tags) - while replacing/rendering those by changing outerHTML??I created a demo below and it seems to work fine <!DOCTYPE HTML> <html lang="en-US"> <head> <script type="text/javascript" src="http://stackoverflow.com/questions/14552746/jquery.min.js"></script> </head> <body> <div id="customtags"> <c-TextField name="Username" ></c-TextField> <br/> <c-NameField name="name" id="c-NameField"></c-NameField> <br/> <c-TextArea name="description" ></c-TextArea> <br/> <blahblah c-t="d"></blahblah> </div> </body> <script> /* Code below to replace the cspa's with the actual html -- woaah it works well */ function ReplaceCustomTags() { // cspa is a random term-- doesn;t mean anything really var grs = $("*"); $.each(grs, function(index, value) { var tg = value.tagName.toLowerCase(); if(tg.indexOf("c-")==0) { console.log(index); console.log(value); var obj = $(value); var newhtml; if(tg=="c-textfield") { newhtml= '<input type="text" value="'+obj.attr('name')+'"></input>'; } else if(tg=="c-namefield") { newhtml= '<input type="text" value="http://stackoverflow.com/questions/14552746/FirstName"></input><input type="text" value="http://stackoverflow.com/questions/14552746/LastName"></input>'; } else if(tg=="c-textarea") { newhtml= '<textarea cols="20" rows="3">Some description from model</textarea>'; } obj.context.outerHTML = newhtml; } z = obj; }); } if(typeof(console)=='undefined' || console==null) { console={}; console.log=function(){}} $(document).ready(ReplaceCustomTags); </script> </html>