There is no innerHTML() function, it is a property of a tag. It is also, though widely supported, non-standard. So the best way would probably be to use DOM level 2 methods. However, they would be more complex than innerHTML.
Try this out:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="test">
<!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
</div>
<input type="button" onclick="alert(document.getElementById('test').innerHTML.replace(/<!--[^(-->)]+-->/g, ''));" value="Go!">
</body>
</html>
Here's the same thing using DOM level 2:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function nv(n){
n = n.cloneNode(true);
var nvhelper = function(n){
for (var c = n.childNodes, i = c.length - 1; i > -1; --i){
if(c[i].hasChildNodes) nvhelper(c[i]);
if(c[i].nodeType == 8) c[i].parentNode.removeChild(c[i]);
};
};
nvhelper(n);
alert(n.innerHTML);
};
</script>
</head>
<body>
<div id="test">
<!-- Hey -->Real Text<!-- There! --><span>Something in a nested tag<!-- another comment --></span>
</div>
<input type="button" onclick="nv(document.getElementById('test'));" value="Go!">
</body>
</html>
But, depending upon just what you wanted to do, it might be easier to use all DOM level 2, skip alerting the innerHTML, and go directly to the use you have planned for the node, once the comments are stripped.
Bookmarks