IE中<table>元素不支持JS加入行appendChild

本文探讨了使用AJAX返回数据并在HTML表格中显示的方法。详细介绍了如何通过操作DOM元素来实现表格内容的更新,包括直接修改innerHTML属性以及创建新的DOM节点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • HTML中有一表格
<table id="test"><tr><td><img src="load.jpg"></td></tr></table>
  •  然后AJAX返回数据,在table中展现
var t=document.getElementById("test") ;
t.innerHTML="<tr><td>数据</td></tr>";
或者
var t=document.getElementById("test") ;

var tr=document.createElement("tr");
var td=doucment.createElement("td");
td.innerHTML="数据";
tr.appendChild(td);
t.appendChild(tr);

 其实tr父节点是tbody,但是在tbody中添加tr,我也没有成功。

 

  •  然后上面是不行的,变通一下在td里面添加内容,所以你要完全构造一个table,
<table><tr><td id="test"><img src="load.jpg"></td></tr></table>

var t=document.getElementById("test") ;
t.innerHTML="<table><tr><td>数据</td></tr></table>";

//当然你直接操作DOM节点,也行,不过但现在我还未取舍innerHTML还是全部DOM节点操作

 

  • 或者你也可以预设一个div然后在里面添加内容,内容容器或者是TABLE或者是其他类型的元素

总之:不要预设table然后,在table中加入行,除非IE消亡了。

 

分析以下html 使用这个js 实现markdown转思维导图生成html: <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Markmap</title> <style> * { margin: 0; padding: 0; } html { font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } #mindmap { display: block; width: 100vw; height: 100vh; } .markmap-dark { background: #27272a; color: white; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.css"> </head> <body> <svg id="mindmap"></svg> <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/markmap-view@0.18.12/dist/browser/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.18.12/dist/index.js"></script> <script>(e=>{window.WebFontConfig={custom:{families:["KaTeX_AMS","KaTeX_Caligraphic:n4,n7","KaTeX_Fraktur:n4,n7","KaTeX_Main:n4,n7,i4,i7","KaTeX_Math:i4,i7","KaTeX_Script","KaTeX_SansSerif:n4,n7,i4","KaTeX_Size1","KaTeX_Size2","KaTeX_Size3","KaTeX_Size4","KaTeX_Typewriter"]},active:()=>{e().refreshHook.call()}}})(()=>window.markmap)</script><script src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" defer></script><script>(()=>{setTimeout(()=>{const{markmap:S,mm:Q}=window,$=new S.Toolbar;$.attach(Q);const I=$.render();I.setAttribute("style","position:absolute;bottom:20px;right:20px"),document.body.append(I)})})()</script> <script>((l,U,M,R)=>{const N=l();window.mm=N.Markmap.create("svg#mindmap",(U||N.deriveOptions)(R),M),window.matchMedia("(prefers-color-scheme: dark)").matches&&document.documentElement.classList.add("markmap-dark")})(()=>window.markmap,null,{"content":"markmap","children":[{"content":"Links","children":[{"content":"<a href=\"https://markmap.js.org/\">Website</a>","children":[],"payload":{"tag":"li","lines":"8,9"}},{"content":"<a href=\"https://github.com/gera2ld/markmap\">GitHub</a>","children":[],"payload":{"tag":"li","lines":"9,11"}}],"payload":{"tag":"h2","lines":"6,7"}},{"content":"Related Projects","children":[{"content":"<a href=\"https://github.com/gera2ld/coc-markmap\">coc-markmap</a> for Neovim","children":[],"payload":{"tag":"li","lines":"13,14"}},{"content":"<a href=\"https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode\">markmap-vscode</a> for VSCode","children":[],"payload":{"tag":"li","lines":"14,15"}},{"content":"<a href=\"https://github.com/emacs-eaf/eaf-markmap\">eaf-markmap</a> for Emacs","children":[],"payload":{"tag":"li","lines":"15,17"}}],"payload":{"tag":"h2","lines":"11,12"}},{"content":"Features","children":[{"content":"Lists","children":[{"content":"<strong>strong</strong> <s>del</s> italic <mark>highlight</mark>","children":[],"payload":{"tag":"li","lines":"23,24"}},{"content":"<code>inline code</code>","children":[],"payload":{"tag":"li","lines":"24,25"}},{"content":"<svg width=\"16\" height=\"16\" viewBox=\"0 -3 24 24\"><path d=\"M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"/></svg> checkbox","children":[],"payload":{"tag":"li","lines":"25,26"}},{"content":"Katex: <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding=\"application/x-tex\">x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.4306em;\"></span><span class=\"mord mathnormal\">x</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1.3845em;vertical-align:-0.345em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.0395em;\"><span style=\"top:-2.655em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mtight\">2</span><span class=\"mord mathnormal mtight\">a</span></span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.394em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mtight\">−</span><span class=\"mord mathnormal mtight\">b</span><span class=\"mbin mtight\">±</span><span class=\"mord sqrt mtight\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.9221em;\"><span class=\"svg-align\" style=\"top:-3em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord mtight\" style=\"padding-left:0.833em;\"><span class=\"mord mtight\"><span class=\"mord mathnormal mtight\">b</span><span class=\"msupsub\"><span class=\"vlist-t\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7463em;\"><span style=\"top:-2.786em;margin-right:0.0714em;\"><span class=\"pstrut\" style=\"height:2.5em;\"></span><span class=\"sizing reset-size3 size1 mtight\"><span class=\"mord mtight\">2</span></span></span></span></span></span></span></span><span class=\"mbin mtight\">−</span><span class=\"mord mtight\">4</span><span class=\"mord mathnormal mtight\">a</span><span class=\"mord mathnormal mtight\">c</span></span></span><span style=\"top:-2.8821em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"hide-tail mtight\" style=\"min-width:0.853em;height:1.08em;\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400em\" height=\"1.08em\" viewBox=\"0 0 400000 1080\" preserveAspectRatio=\"xMinYMin slice\"><path d=\"M95,702\nc-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14\nc0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54\nc44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10\ns173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429\nc69,-144,104.5,-217.7,106.5,-221\nl0 -0\nc5.3,-9.3,12,-14,20,-14\nH400000v40H845.2724\ns-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7\nc-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z\nM834 80h400000v40h-400000z\"/></svg></span></span></span><span class=\"vlist-s\">​</span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.1179em;\"><span></span></span></span></span></span></span></span></span></span><span class=\"vlist-s\">​</span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.345em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span></span></span></span></span>","children":[{"content":"<a href=\"#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md\">More Katex Examples</a>","children":[],"payload":{"tag":"li","lines":"27,28"}}],"payload":{"tag":"li","lines":"26,28","fold":1}},{"content":"Now we can wrap very very very very long text with the <code>maxWidth</code> option","children":[],"payload":{"tag":"li","lines":"28,29"}},{"content":"Ordered list","children":[{"content":"1. item 1","children":[],"payload":{"tag":"li","lines":"30,31","listIndex":1}},{"content":"2. item 2","children":[],"payload":{"tag":"li","lines":"31,33","listIndex":2}}],"payload":{"tag":"li","lines":"29,33"}}],"payload":{"tag":"h3","lines":"21,22"}},{"content":"Blocks","children":[{"content":"<pre data-lines=\"35,38\"><code class=\"language-js\"><span class=\"hljs-variable language_\">console</span>.<span class=\"hljs-title function_\">log</span>(<span class=\"hljs-string\">&apos;hello, JavaScript&apos;</span>)\n</code></pre>","children":[],"payload":{"tag":"pre","lines":"35,38"}},{"content":"<table data-lines=\"39,43\">\n<thead data-lines=\"39,40\">\n<tr data-lines=\"39,40\">\n<th>Products</th>\n<th>Price</th>\n</tr>\n</thead>\n<tbody data-lines=\"41,43\">\n<tr data-lines=\"41,42\">\n<td>Apple</td>\n<td>4</td>\n</tr>\n<tr data-lines=\"42,43\">\n<td>Banana</td>\n<td>2</td>\n</tr>\n</tbody>\n</table>","children":[],"payload":{"tag":"table","lines":"39,43"}},{"content":"<img src=\"https://markmap.js.org/favicon.png\" alt>","children":[],"payload":{"tag":"img","lines":"44,45"}}],"payload":{"tag":"h3","lines":"33,34"}}],"payload":{"tag":"h2","lines":"17,18"}}]},{"colorFreezeLevel":2})</script> </body> </html>
最新发布
06-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值