addChild() 和 createElement() Javascript 问题

发布于 2024-11-01 01:03:17 字数 2120 浏览 4 评论 0原文

当我在代码中使用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)+'">&lt;</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)+'">&gt;</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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

明媚如初 2024-11-08 01:03:17
child.id = "searchResultsPages";

#searchResultsPage{

看到有什么问题吗? :)

就像s

child.id = "searchResultsPages";

#searchResultsPage{

See anything wrong there? :)

Like an s

夜巴黎 2024-11-08 01:03:17

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文