关于appendChild的问题，报HierarchyRequestError错误

zhangweitc123 2014-12-25 02:46:11
如题，运行时报HierarchyRequestError错误，直接上代码，请高手指点


<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ page import ="java.util.*,com.ruixin.entity.*"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

	<script type="text/javascript">

	   window.onload = function(){

	    var tb = document.getElementById("tb");

	    <%

			List reportList=(List)request.getAttribute("reportList");

			for(int i=0;i<reportList.size();i++){

				Report report=(Report)reportList.get(i);

				%>

					 //$("#tb").append($("<tr><td><%=report.getCode()%></td><td><%=report.getName()%></td><td><%=report.getUseNum()%></td><td><%=report.getMoney()%></td></tr>"));

				 	tb.appendChild("<tr><td><%=report.getCode()%></td><td><%=report.getName()%></td><td><%=report.getUseNum()%></td><td><%=report.getMoney()%></td></tr>");

				<%

			}

			%>

	   }

	</script>

</head>

  

<body>

<div align="center">

  <p>电费统计报表</p>

  <table width="400" border="0" id="tb">

    <tr>

      <th width="150">编码</th>

      <th width="150">电表名称</th>

      <th width="150">用电量</th>

      <th width="150">金额</th>

    </tr>

  </table>

</div>

</body>

  

</html>
...全文
2040 6 打赏 收藏 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhangweitc123 2014-12-27
  • 打赏
  • 举报
 回复
引用 5 楼 u013104499 的回复:
[quote=引用 4 楼 zhangweitc123 的回复:] 为什么不能写在一起呢

    <script type="text/javascript">
      window.onload=function(){
        var tb=document.getElementById('tb');
        tb.appendChild("<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>"); 
        //你可以试一下这种最简单的在table中动态添加td的方式，但是这明显是不行的，appendChild()中添加的应该是动态
       //创建好的标签，而js中创建标签使用的是标签名称，例如：document.createElement('div'),并不是将div改为<div></div>
       //document.createElement('<div></div>');有点类似于jquery中的$div=$("<div id='div1'></div>");，但是js并不支持这种
      //动态创建标签的方式
      }
    </script>
[/quote]嗯，知道了，谢谢解答
MnZlZ 2014-12-27
  • 打赏
  • 举报
 回复
引用 4 楼 zhangweitc123 的回复:
为什么不能写在一起呢

    <script type="text/javascript">
      window.onload=function(){
        var tb=document.getElementById('tb');
        tb.appendChild("<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>"); 
        //你可以试一下这种最简单的在table中动态添加td的方式，但是这明显是不行的，appendChild()中添加的应该是动态
       //创建好的标签，而js中创建标签使用的是标签名称，例如：document.createElement('div'),并不是将div改为<div></div>
       //document.createElement('<div></div>');有点类似于jquery中的$div=$("<div id='div1'></div>");，但是js并不支持这种
      //动态创建标签的方式
      }
    </script>
zhangweitc123 2014-12-27
  • 打赏
  • 举报
 回复
引用 3 楼 u013104499 的回复:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*,com.ruixin.entity.*"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript">
       window.onload = function(){
        var tb = document.getElementById("tb");
        <%
            List reportList=(List)request.getAttribute("reportList");
            for(int i=0;i<reportList.size();i++){
                Report report=(Report)reportList.get(i);
                %>
       var tr=document.createElement('tr');
        var td1=document.createElement('td');
        var td2=document.createElement('td');
        var td3=document.createElement('td');
        var td4=document.createElement('td');
        td1.innerText=<%=report.getCode()%>;
        td2.innerText=<%=report.getName()%>;
        td3.innerText=<%=report.getUseNum()%>;
        td4.innerText=<%=report.getMoney()%>;
       tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tb.appendChild(tr);
                    //////// tb.appendChild("<tr><td><%=report.getCode()%></td><td><%=report.getName()%></td><td><%=report.getUseNum()%></td><td><%=report.getMoney()%></td></tr>"); 
                <%
            }
            %>
       }
    </script>
</head>
   
<body>
<div align="center">
  <p>电费统计报表</p>
  <table width="400" border="0" id="tb">
    <tr>
      <th width="150">编码</th>
      <th width="150">电表名称</th>
      <th width="150">用电量</th>
      <th width="150">金额</th>
    </tr>
  </table>
</div>
</body>
   
</html>
为什么不能写在一起呢
MnZlZ 2014-12-26
  • 打赏
  • 举报
 回复 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*,com.ruixin.entity.*"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript">
       window.onload = function(){
        var tb = document.getElementById("tb");
        <%
            List reportList=(List)request.getAttribute("reportList");
            for(int i=0;i<reportList.size();i++){
                Report report=(Report)reportList.get(i);
                %>
       var tr=document.createElement('tr');
        var td1=document.createElement('td');
        var td2=document.createElement('td');
        var td3=document.createElement('td');
        var td4=document.createElement('td');
        td1.innerText=<%=report.getCode()%>;
        td2.innerText=<%=report.getName()%>;
        td3.innerText=<%=report.getUseNum()%>;
        td4.innerText=<%=report.getMoney()%>;
       tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tb.appendChild(tr);
                    //////// tb.appendChild("<tr><td><%=report.getCode()%></td><td><%=report.getName()%></td><td><%=report.getUseNum()%></td><td><%=report.getMoney()%></td></tr>"); 
                <%
            }
            %>
       }
    </script>
</head>
   
<body>
<div align="center">
  <p>电费统计报表</p>
  <table width="400" border="0" id="tb">
    <tr>
      <th width="150">编码</th>
      <th width="150">电表名称</th>
      <th width="150">用电量</th>
      <th width="150">金额</th>
    </tr>
  </table>
</div>
</body>
   
</html>
zhangweitc123 2014-12-26
  • 打赏
  • 举报
 回复
这是编辑过后的html内容 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<script type="text/javascript">
	   window.onload = function(){
	    var tb = document.getElementById("tb");
	    
				 	tb.appendChild("<tr><td>00010001</td><td>子目录-01</td><td>45.0</td><td>45.0</td></tr>");
				
				 	tb.appendChild("<tr><td>00010002</td><td>子目录01-1</td><td>60.0</td><td>60.0</td></tr>");
				
	   }
	</script>
</head>
  
<body>
<div align="center">
  <p>电费统计报表</p>
  <table width="400" border="0" id="tb">
    <tr>
      <th width="150">编码</th>
      <th width="150">电表名称</th>
      <th width="150">用电量</th>
      <th width="150">金额</th>
    </tr>
  </table>
</div>
</body>
  
</html>
zhangweitc123 2014-12-26
  • 打赏
  • 举报
 回复
没人回答，自己顶一下，时appendChild的问题
Uncaught Error: HierarchyRequestError: DOM Exception 3
chrome报错：Uncaught Error: HierarchyRequestError: DOM Exception 3    原因：不能完成指定的dom操作。   例如：添加一个子节点（appendChild ），而这个子节点有一个id属性，同时这个id被其他已经存在一个节点（如这个子节点的父节点）使用。   我遇到问题的演示代码:   var msg="hello";...
Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错
在升级到 Windows 10 周年更新后，使用系统自带的 Edge 浏览器浏览部分网站出现这种报错： 在网络上搜索 HierarchyRequestError 会找到同样的案例，大致都指向使用 appendChild 时报错，因此初步判定此报错是和节点操作相关。 翻看网络上的案例，发现大多是 appendChild 使用方法错误，而 E...
HierarchyRequestError: Node cannot be inserted at the specified point in the
               在使用$.get()方法时，出现了以上的错误信息：          HierarchyRequestError: Node cannot be inserted at the specified point in the  hierarchy           下面是我的源代码：   $(document).ready(function() { ...
HierarchyRequestError:Node cannot be inserted at the specified point in the hierarchy
问题描述： 用jquery的ajax加载html片段，出现该错误HierarchyRequestError:Node cannot be inserted at the specified point in the hierarchy   解决： 未指定加载数据返回类型，即dataType，注意不是datatype dataType:'html'   ok!...
整理js中出现的各种错误(一)
                                                  整理js中出现的各种错误(一)   1.  谷歌: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.(在“节点”上执行“appendChi...
JavaScript

87,984

社区成员

224,681

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章