addChild() 和 createElement() Javascript 问题
当我在代码中使用appendChild()和createElement()时,定义的CSS ID的后续样式不会应用。有人能告诉我为什么吗?这是我的代码:
function searchDone(results) {
var result = null;
var parent = document.getElementById('postWrap');
var child = null;
parent.innerHTML = '';
var insertHTML =" ";
//Paginating Results Links
resultNum = results.SearchResponse.Web.Total;
resultNum = resultNum/10;
child = document.createElement('div');
child.id = "paging";
if(results.SearchResponse.Web.Offset != 0){
insertHTML ='<span><a class="jsonp b" href="#" rev="'+(results.SearchResponse.Web.Offset-10)+'"><</a></span>';
}
if(results.SearchResponse.Web.Offset == 0){
insertHTML += '<span>1</span>';
}else{
insertHTML +='<span><a class="jsonp" href="#" rev="0">1</a></span>';
}
for(var i = 1; i <= resultNum; i++){
if((results.SearchResponse.Web.Offset/10) == i){
insertHTML += '<span>'+(i+1)+'</span>';
}else{
insertHTML += '<span><a class="jsonp b" href="#" rev="'+i*10+'">'+(i+1)+'</a></span>';
}
}
if(results.SearchResponse.Web.Total - results.SearchResponse.Web.Offset > 10){
insertHTML += '<span><a class="jsonp b" href="#" rev="'+(results.SearchResponse.Web.Offset+10)+'">></a></span>';
}
child.innerHTML = insertHTML;
parent.appendChild(child);
然后我有一些其他代码通过 Bing API 处理我的搜索查询(只是因为 Google 现在收费...)
接下来,我使用相同的方法插入另一个 div:
//Insert Paginating results again
child = null;
child = document.createElement('div');
child.innerHTML = insertHTML;
child.id = "searchResultsPages";
parent.appendChild(child);
现在我想应用一些样式到这些数字。但是,当我将样式应用于 searchResultsPage 时,就像
#searchResultsPages{
float: right;
}
我没有得到传递的样式一样。奇怪的是,如果我只插入这两个元素之一,一切都会按计划进行,并且样式显示得很好。问题是我希望页面显示在搜索的顶部和底部。
有什么想法为什么会发生这种情况吗?我认为这可能与一个元素被使用两次有关,但我不知道为什么如果对象不同,这会产生任何影响。
谢谢。
When I use appendChild() and createElement() in my code, the subsequent styles for the defined CSS IDs are not applied. Can someone tell me why? Here's my code:
function searchDone(results) {
var result = null;
var parent = document.getElementById('postWrap');
var child = null;
parent.innerHTML = '';
var insertHTML =" ";
//Paginating Results Links
resultNum = results.SearchResponse.Web.Total;
resultNum = resultNum/10;
child = document.createElement('div');
child.id = "paging";
if(results.SearchResponse.Web.Offset != 0){
insertHTML ='<span><a class="jsonp b" href="#" rev="'+(results.SearchResponse.Web.Offset-10)+'"><</a></span>';
}
if(results.SearchResponse.Web.Offset == 0){
insertHTML += '<span>1</span>';
}else{
insertHTML +='<span><a class="jsonp" href="#" rev="0">1</a></span>';
}
for(var i = 1; i <= resultNum; i++){
if((results.SearchResponse.Web.Offset/10) == i){
insertHTML += '<span>'+(i+1)+'</span>';
}else{
insertHTML += '<span><a class="jsonp b" href="#" rev="'+i*10+'">'+(i+1)+'</a></span>';
}
}
if(results.SearchResponse.Web.Total - results.SearchResponse.Web.Offset > 10){
insertHTML += '<span><a class="jsonp b" href="#" rev="'+(results.SearchResponse.Web.Offset+10)+'">></a></span>';
}
child.innerHTML = insertHTML;
parent.appendChild(child);
I then have some other code which processes my search query via API to Bing (only because Google now charges... )
Next, I use the same methods to insert another div:
//Insert Paginating results again
child = null;
child = document.createElement('div');
child.innerHTML = insertHTML;
child.id = "searchResultsPages";
parent.appendChild(child);
Now I'd like to apply some styles to these numbers. However, when I apply a style to searchResultsPage, like
#searchResultsPages{
float: right;
}
I don't get the style being passed on. The curious thing is that if I only insert one of these two elements, everything goes as planned and the style shows up fine. The problem is that I'd like pages displayed at the top and bottom of the search.
Any ideas why this is happening? I think it might have something to do with an element being used twice, but I don't know why this would effect anything if the objects are different.
Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
看到有什么问题吗? :)
就像
s
See anything wrong there? :)
Like an
s
ID 在页面中应该是唯一的,因此如果您有两个 id="searchResultsPage" 的元素,则行为可能会变得有点奇怪,并且 HTML 无效。相反,如果有多个元素,请使用 class="searchResultsPage"。
其他评论者指出的缺少 's' 的问题也非常重要,尽管希望这只是问题中的一个拼写错误。
IDs should be unique within the page so if you have two elements with id="searchResultsPage" the behaviour can get a bit screwy and the HTML is invalid. Instead, use a class="searchResultsPage" if there will be multiple elements.
The issue of the missing 's' the other commenters point out is also quite important though hopefully that was just a typo in the question.