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，用其值替换标记，并在dom中插入新的HTML代码：

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

我认为没有办法保证html（）会返回渲染标记的精确副本。您可以确保模板标记不会被渲染（当然编码）为隐藏元素的值。

修改

例如，以下是您在value属性中编码的外部3个div：

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

Answer 2

我正在使用jQote进行模板化，它在IE8上运行正常。

它最初是由resig编写的。

当使用Jquery的$（）。append（）时，IE 8行为不端

2 个答案: