CODEWITHSUNDEEP
javascripthtml
anups
anups

Reputation: 583

Is using custom HTML tags and replacing custom tags with outerHTML okay?

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="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="FirstName"></input><input type="text" value="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>

Update to the question:

Let me explain a bit further on this. Please assume that JavaScript is enabled on the browser - i.e application is not supposed to run without javascript.

I have seen libraries that use custom attributes to define custom behavior in specified tags. For example Angular.js heavily uses custom attributes. (It also has examples on custom-tags). Although my question is not from a technical strategy perspective - I fail to understand why it would strategically cause problems in scalability/maintainability of the code.

Per me code like <ns:contact .....> is more readable than something like <div custom_type="contact" ....> . The only difference is that custom tags are ignored and not rendered, while the div type gets rendered by the browser

Angular.js does show a custom-tag example (pane/tab). In my example above I am using outerHTML to replace these custom tags - whilst I donot see such code in the libraries - Am I doing something shortsighted and wrong by using outerHTML to replace custom-tags?

Upvotes: 1

Views: 954

Answers (2)

krillgar
krillgar

Reputation: 12805

I can't think of a reason why you'd want to do this.

What would you think if you had to work on a project written by someone else who ignored all common practices and conventions? What would happen if they were no longer at the company to find out why they did something a certain way?

The fact that you have to just go through with JavaScript to make it work at all should be a giant red flag. Unless you have a VERY good reason to, do yourself a favor and use the preexisting tags. Six months from now, are you going to remember why you did things that way?

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

It may well work, but it's probably not a good idea. Screen readers and search engines may have a hard/impossible time reading your page, since they may not interpret the JavaScript. While I can see the point, it's probably better to use this template to develop with, then "bake" it to HTML before putting it on the server.

Upvotes: 0

Related Questions