CODEWITHSUNDEEP
javascripthtmlinnerhtml
user3239558
user3239558

Reputation: 1827

javascript :how to insert object to innerHtml?

I create a table dynamically. And I want to add a text into one of the cell. After click the text, it will send an alert.

I don't know what's the problem about my code. It looks doesn't work.

my code as follows:

<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>

Upvotes: 0

Views: 278

Answers (2)

Bhasyakarulu Kottakota
Bhasyakarulu Kottakota

Reputation: 833

P is having a syntax error

Use innerHTML instead of 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"
        }

Upvotes: 1

dave
dave

Reputation: 64657

It looks like you need to escape your quotes inside this string:

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

Change it to this:

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

Upvotes: 2

Related Questions