使用innerHTML帮助DOM行/单元格

本文介绍了使用innerHTML帮助DOM行/单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有这个代码可以创建一个新的新行和单元格。然后我使用innerHTML将一些 文本放入单元格中 - 与Firefox一起工作得非常好但是 因IE而失败。我猜IE不支持这种做法，但是 有另外一种方法可以用DOM吗？ newr = document.createElement （''tr''）; stbl.appendChild（newr）; newc = document.createElement（''td''）; newr.appendChild（newc）; newr.cells [0] .innerHTML =（nr + 1）+。 " + sa [ti] [nr + 1] +"< br>< hr>" ;; （适用于Firefox，但在IE 6+中也失败了......） 解决方案 过去我注意到有时你不能在IE中访问元素，直到它实际被添加到文档中。 尝试将新行写入文档（将其插入 表），然后修改innerHTML。 或者，创建文本节点并将您的文本附加到 it，然后将其附加到单元格。我不确定，但是你 应该能够以同样的方式创建和附加HR。我现在没有时间玩这个，只是 希望帮忙。 Rob 过去我注意到，有时你无法访问IE中的元素，直到它实际被添加到文档中。尝试将新行写入文档（将其插入表格中），然后修改innerHTML。 或者，创建一个文本节点并将文本附加到其中，然后将其附加到单元格。我不确定，但你应该能够创建并以同样的方式附加HR。我现在没有时间玩这个，只是希望能提供帮助。 Rob 我添加了一个showDOM功能如下。它显示在IE 中添加了额外的东西但是没有显示 显示（???） 我已经基于insertBefore和 nextSibling创建了一个新函数，但是你需要一个现有的行来使用它 - 如果它解决了你的问题，请参阅 。 /> 我的猜测是，addRow1并没有在相当的 正确的位置添加TR，尽管IE通常非常容易接受 这样。 小心包装... < html> < head> < title>插入行< / title> < script type =" text / javascript"> function addRow1（stbl）{ alert（stbl.rows.length +"：" + stbl.firstChild.nodeName）; var newr = document.createElement（ ''tr''）; var newc = document.createElement（''td''）; var newT1 = document.createElement（''p''） var newT2 = docum ent.createTextNode（一个新的段落）; var newT3 = document.createElement（''hr''） newc.appendChild （newT1）; newc.appendChild（newT2）; newc.appendChild（newT3）; newr.appendChild（newc）; stbl.appendChild（newr）; //测试DOM的东西在没有表的情况下工作 var bodyRef = document.getElementsByTagName （body）。item（0）; var newT4 = document.createElement（''p''） var newT5 = document.createTextNode（"一个新的段落）; bodyRef.appendChild（newT4）; bodyRef.appendChild（newT5）; } 函数addRow2（r）{ var newr = document.createElement（''tr''）; var newc = document.createElement（''td''）; newc.innerHTML =" blah blah blah< br>< hr>" ;; newr.appendChild（newc）; var rParent = r.parentNode; rParent.insertBefore（newr，r.nextSibling）; } 函数showDOM（）{ var msg =" ;; 函数listNodes（n）{ msg + = n.nodeName +" \\\" ;; for（var i = 0; I< n.childNodes.length; i ++）{ listNodes（n.childNodes [i]）; } } listNodes（document.getElementById（" aTable"））; alert（msg）; } < / script> < / head> < body> < table id =" aTable" border =" 1"> < tr id =" aRow">< td>这是aRow< / td>< / tr> < / table> < br> < form action ="" name =" aForm"> < input type =" button" value =" add row 1" onclick =" addRow1（document.getElementById（''aTable''））; "> <输入类型=”按钮" value =" add row 2" onclick =" addRow2（document.getElementById（''aRow''））; "> <输入类型=”按钮" value ="显示DOM树> onclick =" showDOM（）;"> < / form> < / body> < / html> Hi, I''ve got this code that creates a new new row and cell. I then put sometext into the cell with innerHTML - works beautifully with Firefox butfails with IE. I guess IE doesn''t support this way of doing it, but isthere another way of doing it with DOM? newr = document.createElement(''tr''); stbl.appendChild(newr);newc = document.createElement(''td''); newr.appendChild(newc);newr.cells[0].innerHTML = (nr+1)+". "+sa[ti][nr + 1]+"<br><hr>";(works in firefox but fails in IE 6+ too...) 解决方案 I have noticed in the past that sometimes you can''t accessan element in IE until it is actually added to the document.Try writing your new row to the document (insert it in thetable), then modify the innerHTML. Alternatively, create a text node and append your text toit, then append it to the cell. I''m not sure, but youshould be able to create and append the HR the same way. Idon''t have time to play with this myself right now, justhoping to help out. Rob I have noticed in the past that sometimes you can''t access an element in IE until it is actually added to the document. Try writing your new row to the document (insert it in the table), then modify the innerHTML. Alternatively, create a text node and append your text to it, then append it to the cell. I''m not sure, but you should be able to create and append the HR the same way. I don''t have time to play with this myself right now, just hoping to help out. Rob I''ve added a "showDOM" function below. It shows that in IEthe extra stuff is added but just doesn''t getdisplayed(???) I''ve created a new function based on insertBefore andnextSibling, but you need an exsiting row to use it - seeif it solves you problem. My guess is that addRow1 is not adding the TR in quite theright spot, though IE is normally very tollerant of stufflike that. Careful of wrapping... <html><head><title>Insert Row</title> <script type="text/javascript">function addRow1(stbl) {alert(stbl.rows.length + " : " + stbl.firstChild.nodeName);var newr = document.createElement(''tr'');var newc = document.createElement(''td'');var newT1 = document.createElement(''p'')var newT2 = document.createTextNode("A new para.");var newT3 = document.createElement(''hr'') newc.appendChild(newT1);newc.appendChild(newT2);newc.appendChild(newT3);newr.appendChild(newc);stbl.appendChild(newr); // Test that DOM stuff works without the tablevar bodyRef = document.getElementsByTagName("body").item(0);var newT4 = document.createElement(''p'')var newT5 = document.createTextNode("A new para.");bodyRef.appendChild(newT4);bodyRef.appendChild(newT5); } function addRow2(r) {var newr = document.createElement(''tr'');var newc = document.createElement(''td'');newc.innerHTML = "blah blah blah <br><hr>"; newr.appendChild(newc);var rParent = r.parentNode;rParent.insertBefore(newr,r.nextSibling);} function showDOM() {var msg = "";function listNodes(n) {msg += n.nodeName + "\n";for (var i=0; i<n.childNodes.length; i++) {listNodes(n.childNodes[i]);}} listNodes(document.getElementById("aTable"));alert(msg);}</script> </head><body><table id="aTable" border="1"><tr id="aRow"><td>Here is aRow</td></tr></table><br><form action="" name="aForm"><input type="button" value="add row 1" onclick="addRow1(document.getElementById(''aTable''));"><input type="button" value="add row 2" onclick="addRow2(document.getElementById(''aRow''));"><input type="button" value="Show DOM tree"onclick="showDOM();"></form> </body></html> 这篇关于使用innerHTML帮助DOM行/单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！