IE 8 неправильно работает при использовании $ (). Append () из Jquery

Question

У меня есть этот скрытый диапазон в исходном коде моей страницы:

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

Как видите, есть определенные теги, такие как {pos}, {id} и т. Д.

Я использую следующий код javascript, чтобы взять этот html, заменить теги на их значения и вставить новый код HTML в 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);
            }
        );

В Firefox и Chrome он работает хорошо и, как и ожидалось, однако в IE 8 html-код изменяется следующим образом:

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

Как видите, существует много пропущенных кавычек и т. Д., Что приводит к разрыву макета и возникновению многих других ошибок.

Как я могу это исправить?

Answer 1

Я использую jQote для создания шаблонов прямо сейчас, и он отлично работает на IE8.

Первоначально он был написан Resig.

Answer 2

Я не думаю, что есть способ гарантировать, что html () вернет точную копию визуализированной разметки. Вы можете убедиться, что разметка шаблона не будет изменена, если отобразить ее (конечно, закодировано) как значение скрытого элемента.

EDIT

Например, вот ваши внешние 3 деления, закодированные в атрибуте значения:

<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;" />

Тогда вы создадите свою HTML-строку следующим образом:

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

В зависимости от того, что вы делаете на стороне сервера, лучше всего просто записать разметку вашего шаблона в виде переменной JavaScript. Итак, у вас будет это:

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

А это:

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