访问通过设置innerHTML创建的HTML元素
Accessing HTML Elements that have been created by setting innerHTML
我有一个函数，它进行ajax调用，然后返回一段插入到表的td元素中的html。使用element.innerHTML=ajaxResult;现在我想访问ajaxResult中具有name属性作为special的元素。所以我做了一个document.getElementsByName('special')，期望得到4-5个元素。但实际上我一个也没有。
这让我无法访问这些元素，我陷入了困境。请帮我解决这个问题。提前感谢！
我认为这与我设置innerHTML后dom没有重新加载有关。但不确定如何重新加载。
我在IE8兼容性视图和IE7标准中使用IE8：(
编辑
这是我的功能
function handleStateChange()
{
if(ajaxRequest.readyState==4 && ajaxRequest.status==200) {
var responseStr = ajaxRequest.responseText;
var splitResult = responseStr.split("$$$$$$$$$$$$$$$$$$$$");
var leftHtml= splitResult [0];
var rightHtml= splitResult [1];
document.getElementById("div1").innerHTML=leftHtml;
if(rightHtml !="") {
document.getElementById("div2").innerHTML=rightHtml;
}
if(splitResult.length >=3 ){
var appActionflag = splitResult [2];
document.getElementById("userAction").innerHTML=appActionflag;
}
if(splitResult.length >= 4 ){
var userId = splitResult [3];
document.getElementById("userId").innerHTML=userId;
}
reverseDNASwitch();
var grpList = document.getElementsByName('parmGrpId');
alert('javascript is working! Found:'+grpList.length);
for(var i=0;i<grpList.length;i++){
alert('Got GroupId: '+ (i));
var grpTd = grpList[i];
grpTd.innnerHTML='Hi';
}
}
}
如果要添加的表单元格本身在DOM中，那么应该可以工作。(所以我可能不得不删除这个答案；最初我认为
document.getElementsByName已经被弃用，但我错了(。以下是使用getElementsByName:的示例
实时复制|实时源
(function() {
// Get the target
var target = document.getElementById("target");
// Dynamically add content
target.innerHTML =
'<div name="special">special 1</div>' +
'<div name="special">special 2</div>' +
'<div name="special">special 3</div>';
// Get those elements
var list = document.getElementsByName("special");
// Prove we got them
var p = document.createElement('p');
p.innerHTML = "Found " + list.length + " 'special' elements";
document.body.appendChild(p);
})();
当然，因为它是document的函数，所以它将找到所有带有name="special"的元素，而不仅仅是添加到表单元格中的元素
如果元素不允许具有name属性，则以上内容在IE上不起作用。例如，如果您查找getElementsByName("special")。它将忽略<div name="special">但找到<input name="special">，因为name不是div元素的有效属性。此MSDN文章中的详细信息。更糟糕的是，IE将包含id匹配的元素，当然这与name无关叹息
除非您需要支持IE7及更早版本(例如，除非您正在为中国开发(，否则您可以将Element#querySelectorAll与选择器'[name="special"]'一起使用。这将只在元素中查找使用name属性的元素。
示例：Live Copy | Live Source
(function() {
// Get the target
var target = document.getElementById("target");
// Dynamically add content
target.innerHTML =
'<div name="special">special 1</div>' +
'<div name="special">special 2</div>' +
'<div name="special">special 3</div>';
// Get those elements
var list = target.querySelectorAll('[name="special"]');
// Prove we got them
var p = document.createElement('p');
p.innerHTML = "Found " + list.length + " 'special' elements";
document.body.appendChild(p);
})();
如果你需要支持IE7或更早版本，你可以看看另一个Stack Overflow问题和我的答案。这个问题指向这篇关于将querySelectorAll添加到document的文章，而我的答案谈到了如何在特定于元素的级别上模拟它。
因此，将这篇文章中的代码与我对另一个问题的回答以及上面的例子结合起来，我们得到：
实时复制|实时源
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="target"></div>
<script>
(function() {
// IE7 support for querySelectorAll. Supports multiple / grouped selectors and the attribute selector with a "for" attribute. http://www.codecouch.com/
if (!document.querySelectorAll) {
(function(d, s) {
d=document, s=d.createStyleSheet();
d.querySelectorAll = function(r, c, i, j, a) {
a=d.all, c=[], r = r.replace(/'[for'b/gi, '[htmlFor').split(',');
for (i=r.length; i--;) {
s.addRule(r[i], 'k:v');
for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
s.removeRule(0);
}
return c;
}
})();
}
var qsaWorker = (function() {
var idAllocator = 10000;
function qsaWorkerShim(element, selector) {
var needsID = element.id === "";
if (needsID) {
++idAllocator;
element.id = "__qsa" + idAllocator;
}
try {
return document.querySelectorAll("#" + element.id + " " + selector);
}
finally {
if (needsID) {
element.id = "";
}
}
}
function qsaWorkerWrap(element, selector) {
return element.querySelectorAll(selector);
}
// Return the one this browser wants to use
return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim;
})();
// Get the target
var target = document.getElementById("target");
// Dynamically add content
target.innerHTML =
'<div name="special">special 1</div>' +
'<div name="special">special 2</div>' +
'<div name="special">special 3</div>';
// Get those elements
var list = qsaWorker(target, '[name="special"]');
// Prove we got them
var p = document.createElement('p');
p.innerHTML = "Found " + list.length + " 'special' elements";
document.body.appendChild(p);
})();
</script>
</body>
</html>
适用于IE7。
作为特定场景的一个选项，当您想要获得具有特定属性(和值(的元素时，您可以使用这样的函数：
function getElementsByAttribute(options) {
/*if (container.querySelectorAll) {
var selector = '';
if (options.tagFilter) {
selector += options.tagFilter;
}
selector += '[' + options.attr;
if (options.val) {
selector += '="' + options.val.replace(/"/g, '''"') + '"';
}
selector += ']';
return Array.prototype.slice.call(options.container.querySelectorAll(selector));
}*/
var elements = options.container.getElementsByTagName(options.tagFilter || "*"),
ret = [],
i, cur,
matches = (function () {
if (options.val) {
return function (el) {
return el.getAttribute(options.attr) === options.val;
};
} else {
return function (el) {
return el.hasAttribute(options.attr);
};
}
})();
for (i = 0; i < elements.length; i++) {
cur = elements[i];
if (matches(cur)) {
ret.push(cur);
}
}
return ret;
}
你这样称呼它：
window.onload = function () {
var contain = document.getElementById("container"),
els = getElementsByAttribute({
container: contain,
attr: "name",
val: "special",
tagFilter: ""
});
console.log("els", els);
};
演示：http://jsfiddle.net/cxq6t/1/
(根据评论，我保留了支持querySelectorAll的原始逻辑，但事实证明在具有无效属性的旧IE中不起作用(
传递给函数的对象接受：
container：包含要查看的元素attr：要查找的属性val：要匹配的可选值tagFilter：匹配元素的tagName的可选过滤器
我在IE7/8中进行了测试，看看<div name="special">是否匹配，它确实匹配。以及其他<input /> s。
如果你想将选择器扩展为更复杂的东西，比如querySelectorAll支持的东西，你可以使用T.J.Crowder这样的polyfill。但这似乎可以完成任务。
相关文章：
- 如何设置html元素填充的动画
- 删除对HTML元素的拖动
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何使用JQuery在Javascript中转换字符串中的HTML元素
- 一个html元素的克隆次数太多
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 为什么我在Internet Explorer上看不到html元素
- 重新排列HTML元素的顺序并更改内容
- 使用.on动态添加jquery/js不知道的html元素
- 如果类不是一个选项，如何在使用 jQuery 时控制(避免）嵌套 html 元素的样式
- 如何将html元素添加到tampermonkey中
- 访问html元素值javascript
- 如何在HTML元素上创建函数，而不是将元素作为参数传递
- 自定义HTML元素属性未显示-Web组件
- 让HTML元素充当停止滚动的锚点
- 将html元素插入到文本字符串中，以匹配另一个html字符串
- 替换HTML元素中的字符
- 如何将html元素添加为生成的内容
- 如何使用JavaScript在没有html dom的情况下隐藏html元素
- 使用JS加载HTML元素
