jQuery的appendTo不插入HTML [英] appendTo for jquery not inserting html
本文介绍了jQuery的appendTo不插入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''> 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 + " 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屋!
查看全文