Menu
Hello, I’m trying to create DIV, add some HTML to the DIV, then append it to another DIV.
Here’s a basic example:
[CODE]<!doctype html>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Title</title>
<meta name=”language” content=”en” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>
<script type=”text/javascript”>
//<![CDATA[
function addElement() {
var wrap = document.getElementById(‘wrap’);
// with createTextNode
var newDiv = document.createElement(‘div’);
var text = document.createTextNode(‘newDiv text’);
newDiv.appendChild(text);
wrap.appendChild(newDiv);
// with innerHTML
var newDiv2 = document.createElement(‘div’);
var theHtml = ‘<p>newDiv2 html</p>’;
newDiv2.innerHTML = theHtml;
wrap.appendChild(newDiv);
}
//]]>
</script>
</head>
<body>
<div id=”wrap”></div>
<input type=”button” value=”Add DOM Element” onclick=”addElement()” />
</body>
</html>
The createTextNode approach works. Why doesn’t the innerHTML example work? Can you not set the innerHTML of a newly created element?