使用getElementById填充页面上的元素

新增了Ajax，但我知道您可以使用getelementbyid使用该ID更新页面上的任何元素。我想知道的是，如果他们都具有相同的ID，那么您如何定位页面上的特定元素？使用getElementById填充页面上的元素

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

如何定位第二个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')">

来源

2011-06-25 Jay

你不应该重用id的。这就是为什么你现在挣扎。要将元素分组，请使用类名称。 Id唯一标识一个DOM元素。 – BonyT

作为一个指针：'getElementById（）'有一个单独的名字，例如'getElementsByClassName（）'的复数名称，这是因为它适用于并且应该找到/操作***只有一个***元素。 –

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

来源

2011-06-25 18:42:12 Gaurav

我现在将标签更改为类！那么如何实现你的技术来处理上面的代码呢？ – Jay

我编辑了答案以显示一些示例实现。 – Gaurav

thanx G，但这是否意味着我必须手动输入数字（1）？如果李是名单上的第20或第8名呢？你如何检测这一点，并确保脚本选择了这个？ – Jay

不要重复的ID，使用类名来代替。 ID意味着独特。

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

然后，您可以使用类似jQuery的东西来选择它们。

$(".a")

来源

2011-06-25 18:36:04 bevacqua

或者您可以使用'document.getElementsByClassName（'a'）;'然后'for'（或其他）循环来做同样的事情。 jQuery对于所有东西都不是必需的（就像它真的一样，真的是......）。 –

@David当然不是，但它存在，所以我建议使用它，因为它提高了可读性，使用起来非常简单。 – bevacqua

的确如此，但我认为vanilla-JS方法会更加适用（使用库方法，jQuery，MooTools ...）作为附录，以显示库的差异和（可能）好处。 –

使用getElementById填充页面上的元素

回答

相关问题