使用getElementById填充页面上的元素

时间:2011-06-25 15:59:51

标签: javascript html ajax

是Ajax的新手,但我知道您可以使用getelementbyid更新页面上具有该ID的任何元素。我想知道的是,如果它们都具有相同的ID,您如何定位页面上的特定元素?

<li class="a">something</li><li class="a">something b</li>

我如何定位第二个李?因为它们都使用相同的id,所以我不能使用getelementbyid('a'),因为这只会更新带有该id的第一个元素。

这是我的ajax脚本

function loadurl(dest) {
var XMLHttpRequestObject = false; 
if (window.XMLHttpRequest) { 
        XMLHttpRequestObject = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        XMLHttpRequestObject = new 
        ActiveXObject("Microsoft.XMLHttp"); 
} if(XMLHttpRequestObject) { 
        XMLHttpRequestObject.open("GET", dest); 
        XMLHttpRequestObject.onreadystatechange = function() { 

    if (XMLHttpRequestObject.readyState == 4 && 
        XMLHttpRequestObject.status == 200) { 
        document.getElementById("a").innerHTML = 
        XMLHttpRequestObject.responseText; 
        delete XMLHttpRequestObject; 
        XMLHttpRequestObject = null; 
        } 
    } 
    XMLHttpRequestObject.send(null); 
} 

}

这是链接

<a onclick="loadurl('page.php?p=1&id=2')">

2 个答案:

答案 0 :(得分:2)

不要重复ID,而是使用类名。 ID应该是唯一的。

<li class="a">something</li><li class="a">something b</li>

然后您可以使用类似jQuery的内容来选择它们。

$(".a")

答案 1 :(得分:0)

在HTML网页中多次使用相同的ID是无效的HTML。如果您使用了类名:

<li class="a">something</li><li class="a">something b</li>

然后你可以使用document.getElementsByClassName()来获取一个包含该类所有元素的数组。

要将您的回复放在第二个元素中,请使用以下内容:

document.getElementsByClassName("a")[1].innerHTML = XMLHttpRequestObject.responseText;

或者,要将您的响应放在具有该类名的所有元素中,请使用以下内容:

var els = document.getElementsByClassName("a");
for (var i = 0; i < els.length; ++i)
    els[i].innerHTML = XMLHttpRequestObject.responseText;