IE 8 misbehaving when using $().append() of Jquery

Question

I have this hidden span in the source code of my page:

<span id="var-form" class="hidden">
    <div class="{cls}">
        <div class="{cls}-area">
            <div class="gray-font16" style="color:#82BD0F;">{num}.</div>
            <div class="ad-form-field">Title: <img src="images/zero.gif" width="40" height="1" alt="" />
                <input type="text" id="title_{pos}" class="textbox-ad" value="{title}" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Line 1: <img src="images/zero.gif" width="28" height="1" alt="" />
                <input type="text" id="line1_{pos}" class="textbox-ad" value="{line1}" />
                <img src="images/ad-form_icon2.jpg" alt="" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Line 2: <img src="images/zero.gif" width="28" height="1" alt="" />
                <input type="text" id="line2_{pos}" class="textbox-ad" value="{line2}" />
                <img src="images/ad-form_icon.jpg" alt="" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Display Url: 
                <input type="text" id="displayUrl_{pos}" class="textbox-ad" value="{displayUrl}" /></div>
            <div style="height:3px;"></div>
            <div class="ad-form-field">Link Url: <img src="images/zero.gif" width="15" height="1" alt="" />
                <input type="text" id="linkUrl_{pos}" class="textbox-ad" value="{linkUrl}" /></div>
            <div style="height:6px;"></div>
            <div class="ad-form-field"> <img src="images/zero.gif" width="48" height="1" alt="" />
                <span style="font-size:13px;">33 Characters</span>
                <img src="images/zero.gif" width="15" height="1" alt="" />
                <input type="submit" num="{pos}" value="" class="save-button" />
                <img src="images/zero.gif" width="10" height="1" alt="" />
                <input type="submit" num="{pos}" value="" class="delete-button" /></div>
            <div style="height:12px;"></div>
        </div>
    </div>
    </span>

As you can see, there are certain tags such as {pos} , {id}, etc.

I use the following javascript code to take this html, replace the tags with their values, and insert the new HTML code in the dom:

var html="<span id='ad_" + this.position + "' class='hidden'>";
html=html + $("#var-form").html() + "</span>";
var tags={};

        tags.id=self.id;
        tags.num=self.position + 1;
        tags.pos=self.position;
        tags.title=self.title;
        tags.cls=self.cls;
        tags.line1=self.line1;
        tags.line2=self.line2;
        tags.displayUrl=self.displayUrl;
        tags.linkUrl=self.linkUrl;

        $.each(tags,function(tag, val)
            {
                html=replaceAll("{" + tag + "}",val,html);
            }
        );

On Firefox and chrome, it works well and as expected, however in IE 8 the html code is changed to this:

<span id='ad_0' class='hidden'><DIV class=ad-form1>
<DIV class=ad-form1-area>
<DIV style="COLOR: #82bd0f" class=gray-font16>1.</DIV>
<DIV class=ad-form-field>Title: <IMG alt="" src="images/zero.gif" width=40 height=1> <INPUT id=title_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Line 1: <IMG alt="" src="images/zero.gif" width=28 height=1> <INPUT id=line1_0 class=textbox-ad value= type=text> <IMG alt="" src="images/ad-form_icon2.jpg"></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Line 2: <IMG alt="" src="images/zero.gif" width=28 height=1> <INPUT id=line2_0 class=textbox-ad value= type=text> <IMG alt="" src="images/ad-form_icon.jpg"></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Display Url: <INPUT id=displayUrl_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 3px"></DIV>
<DIV class=ad-form-field>Link Url: <IMG alt="" src="images/zero.gif" width=15 height=1> <INPUT id=linkUrl_0 class=textbox-ad value= type=text></DIV>
<DIV style="HEIGHT: 6px"></DIV>
<DIV class=ad-form-field><IMG alt="" src="images/zero.gif" width=48 height=1> <SPAN style="FONT-SIZE: 13px">33 Characters</SPAN> <IMG alt="" src="images/zero.gif" width=15 height=1> <INPUT class=save-button type=submit num="0"> <IMG alt="" src="images/zero.gif" width=10 height=1> <INPUT class=delete-button type=submit num="0"></DIV>
<DIV style="HEIGHT: 12px"></DIV></DIV></DIV></span>

As you can see there are many missed quotation marks, etc and it causes the layout to break and many other errors to occur.

How can I fix this?

Answer 1

I don't think there is a way to guarantee that html() will return an exact copy of the rendered markup. You could ensure the template markup doesn't get altered by rendering it (encoded of course) as the value of a hidden element.

EDIT

Just for example, here are your outer 3 divs encoded in a value attribute:

<input id="template" type="hidden" value="&lt;div class=&quot;{cls}&quot;&gt;&lt;div class=&quot;{cls}-area&quot;&gt;&lt;div class=&quot;gray-font16&quot; style=&quot;color:#82BD0F;&quot;&gt;&lt;div style=&quot;height:12px;&quot;&gt;TEST&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;" />

Then you'd build your html string like this:

var html="<span id='ad_" + this.position + "' class='hidden'>";
html=html + $("#template").val() + "</span>";

Depending on what you are doing on the server side, it might be best to simply write out your template markup as a JavaScript variable. So you'd have this:

var template = "<div class=\"{cls}\"><div class=\"{cls}-area\">"
    + "<div class=\"gray-font16\" style=\"color:#82BD0F;\"><div "
    +"style=\"height:12px;\">TEST</div></div></div>";

And this:

var html="<span id='ad_" + this.position + "' class='hidden'>" + template + "</span>";

Answer 2

can anyone help me to add a around a

$(document).ready(function() { $('input[type="submit"]').each(function() {

    $(this).before('<span class="box1"><span>');
    $(this).after('</span></span>');

      });

});

the above cord is not working properly..

Answer 3

I am using jQote to do templating right now and it works fine on IE8.

It was originally written by resig.