jQuery的appendTo不插入HTML [英] appendTo for jquery not inserting html

问题描述

我在javascript中有一个函数，该函数会返回HTML，如下所示:

I have a function in javascript which returns an HTML some thing like this:

<div class=''accordionNew''><div class=''topBox''><div class=''leftCurve''> <div class=''rightCurve''><div class=''midBg''><div class=''boxTitle'' id=''widgetTitle''>Orders</div> <div class=''clear''></div></div></div></div></div><div class=''clear''></div><div id=''divAttContent'' class=''contentBox border1 requiredFontSize requiredFontColor''></div><div class=''pagination fivePxPaddingTop lfloat''> <div class=''paginationDisplayNum''> <div class=''lfloat threePxMarginTop fivePxMarginRight''>Showing<strong>1 - 5</strong>of <strong>25</strong></div><a href=''#'' class=''first-in tabs'' title=''First''></a><a href=''#'' class=''prev-in tabs'' title=''Previous''></a><a href=''#'' class=''next tabs'' title=''Next''></a><a href=''#'' class=''last tabs''title=''Last''></a></div> <div class=''lfloat fifteenPxMarginRight onePxMarginTop''><select><option selected=''selected''>5</option><option>10</option><option>15</option><option>20</option><option>25</option></select><div class=''topPadd lfloat fontGrayL fivePxMarginTop''>&nbsp;Per page</div></div><div class=''clear''></div></div><div class=''clear''></div></div></div>

这是返回上述Html的函数:

This is the function which returns the above Html :

function getWidgetHtml(result) {
var htmlObject = '';
    var htmlObject = "<div class='accordionNew'>";
    htmlObject = htmlObject + "<div class='topBox'>";
    htmlObject = htmlObject + "<div class='leftCurve'>";
    htmlObject = htmlObject + " <div class='rightCurve'>";
    htmlObject = htmlObject + "<div class='midBg'>";
    htmlObject = htmlObject + "<div class='boxTitle' id='widgetTitle'>Orders";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + " <div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div id='divAttContent' class='contentBox border1 requiredFontSize requiredFontColor'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='pagination fivePxPaddingTop lfloat'>";
    htmlObject = htmlObject + " <div class='paginationDisplayNum'>";
    htmlObject = htmlObject + " <div class='lfloat threePxMarginTop fivePxMarginRight'>";
    htmlObject = htmlObject + "Showing<strong>1 - 5</strong>of <strong>25</strong></div>";
    htmlObject = htmlObject + "<a href='#' class='first-in tabs' title='First'></a><a href='#' class='prev-in tabs'";

    htmlObject = htmlObject + " title='Previous'></a><a href='#' class='next tabs' title='Next'></a><a href='#' class='last tabs'";

    htmlObject = htmlObject + "title='Last'></a>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + " <div class='lfloat fifteenPxMarginRight onePxMarginTop'>";
    htmlObject = htmlObject + "<select>";
    htmlObject = htmlObject + "<option selected='selected'>5</option>";
    htmlObject = htmlObject + "<option>10</option>";
    htmlObject = htmlObject + "<option>15</option>";
    htmlObject = htmlObject + "<option>20</option>";
    htmlObject = htmlObject + "<option>25</option>";
    htmlObject = htmlObject + "</select>";
    htmlObject = htmlObject + "<div class='topPadd lfloat fontGrayL fivePxMarginTop'>";
    htmlObject = htmlObject + "&nbsp;Per page</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    return htmlObject;
}

我以这种方式附加它，

And i append it this way,

var htmlObject = getWidgetHtml();
$(htmlObject).appendTo($(''#widgetDiv1''));
//where widgetDiv1 is the id of the div on my aspx page. If i place the same returned HTML directly on the aspx page it shows properly but the appendTo does not show anything. I also tested by appending a simple string and it is able to do that. What may be the problem?

推荐答案

(htmlObject).appendTo(

(htmlObject).appendTo(

(''#widgetDiv1''))); //其中widgetDiv1是我的aspx页面上的div的ID.如果我将相同的返回HTML直接放置在aspx页面上，则可以正确显示，但是appendTo不显示任何内容.我还通过添加一个简单的字符串进行了测试，它能够做到这一点.可能是什么问题?

(''#widgetDiv1'')); //where widgetDiv1 is the id of the div on my aspx page. If i place the same returned HTML directly on the aspx page it shows properly but the appendTo does not show anything. I also tested by appending a simple string and it is able to do that. What may be the problem?

小错误，但是...

Small error but...

function getWidgetHtml(result) {
    var htmlObject = '';
    var htmlObject = "<div class='accordionNew'>";
    htmlObject = htmlObject + "<div class='topBox'>";
    htmlObject = htmlObject + "<div class='leftCurve'>";
    htmlObject = htmlObject + " <div class='rightCurve'>";
    htmlObject = htmlObject + "<div class='midBg'>";
    htmlObject = htmlObject + "<div class='boxTitle' id='widgetTitle'>Orders";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + " <div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div id='divAttContent' class='contentBox border1 requiredFontSize requiredFontColor'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='pagination fivePxPaddingTop lfloat'>";
    htmlObject = htmlObject + " <div class='paginationDisplayNum'>";
    htmlObject = htmlObject + " <div class='lfloat threePxMarginTop fivePxMarginRight'>";
    htmlObject = htmlObject + "Showing<strong>1 - 5</strong>of <strong>25</strong></div>";
    htmlObject = htmlObject + "<a href='#' class='first-in tabs' title='First'></a><a href='#' class='prev-in tabs'";
    htmlObject = htmlObject + " title='Previous'></a><a href='#' class='next tabs' title='Next'></a><a href='#' class='last tabs'";
    htmlObject = htmlObject + "title='Last'></a>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + " <div class='lfloat fifteenPxMarginRight onePxMarginTop'>";
    htmlObject = htmlObject + "<select>";
    htmlObject = htmlObject + "<option selected='selected'>5</option>";
    htmlObject = htmlObject + "<option>10</option>";
    htmlObject = htmlObject + "<option>15</option>";
    htmlObject = htmlObject + "<option>20</option>";
    htmlObject = htmlObject + "<option>25</option>";
    htmlObject = htmlObject + "</select>";
    htmlObject = htmlObject + "<div class='topPadd lfloat fontGrayL fivePxMarginTop'>";
    htmlObject = htmlObject + " Per page</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "<div class='clear'>";
    htmlObject = htmlObject + "</div>";
    htmlObject = htmlObject + "</div>";
    //The following closing tag was one to many
    //htmlObject = htmlObject + "</div>"; 
    return htmlObject;
}

我在自己的测试工具中使用了您的功能，但该功能在FF中有效，但在IE中不起作用.在IE中，我发现最后一个关闭div没有对应的打开div后，我开始使用它.这使IE感到困惑，因为jQuery实现在

I used your function in my own test harness and it worked in FF but not in IE. In IE I got it to work after I found out that the last closing div did not have a corresponding opening div. This gets IE confused as the jQuery implementation uses innerHTML on IE to do the HTML parsing when string in

这篇关于jQuery的appendTo不插入HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！