I've come up with this code and cant figure out why nothing appears when I press the button. The table is soposed to show. Probably something really simple cuz I often stuck on stupid things.

<html>
<head>
<script type="text/javascript">

function appendtable() {
	
	var div = document.getElementById("divide");
	
	var ControlsDesign = document.createElement("div");
 	var table_cd = document.createElement("table");
	var tr_cd = document.createElement("tr");
	var td_cd = document.createElement("td");
	var table_content = document.createElement("table");
    
	var tr = document.createElement("tr");
	var td = document.createElement("td");
	var t = document.createTextNode("Some text");
    
	td.appendChild(t);
	tr.appendChild(td);
	table_content.appendChild(tr);

	td_cd.appendChild(table_content);
	tr_cd.appendChild(td_cd);
	table_cd.appendChild(tr_cd);
	ControlsDesign.appendChild(table_cd);

	div.appendChild(ControlsDesign);

	alert(document.getElementById("divide").innerHTML);
}


</script>
</head>
<body bgcolor="#999999">

<div id="divide" height="100"></div><input type="button" onclick="appendtable()" value="Press me">

</body>
</html>

Thanks for helping.

You will be happy to know that this works in Firefox, but not in Internet Explorer. I'm not sure what the exact problem is, but it has something to do with the DOM and browser compatibility. If I figure it out I will let you know.

That sucks. I really need it to work in IE. The weirdest thing is that the code is really there but wont show up on the page.

I added this line of code at the end of the function.

document.getElementById("divide").innerHTML = document.getElementById("divide").innerHTML;

The code existed so I just kind of refreshed it. If anything better comes up I will change it.

The problem is because of
var tr = document.createElement("tr");
var td = document.createElement("td");
In case of IE the above two lines of code doesn't work. Instead it should be
var tr = table.insertRow(<row index>);
var td = tr.insertCell(<cellIndex>);

<script language="javascript">
function addElement(){
// Get the value into the input text field
var element=document.getElementById('newElement').value;
if(element==""){
// Show an error message if the field is blank;
document.getElementById('msg').style.display="block";
document.getElementById('msg').innerHTML = "Error! Insert a description for the element";
}else{
// This is the <ul id="myList"> element that will contains the new elements
var container = document.getElementById('myList');
// Create a new <li> element for to insert inside <ul id="myList">
var new_element = document.createElement('li');
new_element.innerHTML = element;
container.insertBefore(new_element, container.firstChild);
// Show a message if the element has been added;
document.getElementById('msg').style.display="block";
document.getElementById('msg').innerHTML = "Elemend added!";
// Clean input field
document..getElementById('newElement').value="";
}
}
</script>
This article has been dead for over six months. Start a new discussion instead.