使用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;