使用getElementById填充頁面上的元素

Question

是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')">

Answer 1

不要重復ID，而是使用類名。 ID應該是唯一的。

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

然后你可以使用類似jQuery的東西來選擇它們。

$(".a")

Answer 2

在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;