javascript:如何将对象插入innerHtml?

时间:2014-07-08 16:48:40

标签: javascript html innerhtml

我动态创建一个表。我想在其中一个单元格中添加一个文本。单击文本后,它将发送警报。

我不知道我的代码有什么问题。它看起来不起作用。

我的代码如下:

<html>
<head>
<script language="javascript" type="text/javascript">
function alertInfo(){
alert("info");
}
function insRow()
  {
  var p ="<p><u><font  size="2" color="blue" onclick='alertInfo()' style="cursor:pointer">parragraph</font></u></p>";
 //var p="";
  var x=document.getElementById('myTable').insertRow(0);
  var y=x.insertCell(0);
  var z=x.insertCell(1);
  y.appendChild(p);
  z.innerHTML="NEW CELL2"
  }
</script>
<style type="text/css"> 
p{
a:link{color:#FFFFFF;} 
a:visited{color:#FFFFFF;} 
a:hover{color:#FFFF00;} 
a:active{color:#00CC00;} 
}
</style> 

</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="insertRow">

</body>
</html>

2 个答案:

答案 0 :(得分:2)

看起来您需要在此字符串中转义引号:

var p ="<p><u><font  size="2" color="blue" onclick='alertInfo()' style="cursor:pointer">parragraph</font></u></p>";

将其更改为:

var p ="<p><u><font  size=\"2\" color=\"blue\" onclick='alertInfo()' style=\"cursor:pointer\">parragraph</font></u></p>";

答案 1 :(得分:1)

P语法错误

使用innerHTML而不是appendChild

function insRow() {
            var p = "<p><u><font size='2' color='blue' onclick='alertInfo()' style='cursor:pointer'>parragraph</font></u></p>";
            //var p="";
            var x = document.getElementById('myTable').insertRow(0);
            var y = x.insertCell(0);
            var z = x.insertCell(1);
            y.innerHTML = p;
            z.innerHTML = "NEW CELL2"
        }