javascript - 使用href链接动态添加div

Question

我正在尝试使用链接和一些 JavaScript 动态添加 div。我已经设置了一个jsfiddle http://jsfiddle.net/W4Sup/1654/ 。

这是 html

<a href="javascript:addDiv();" onclick="addDiv();">Add Div</a>

这是CSS

div {
 border: 1px dotted red;
 padding: 10px;    
}

这是 JavaScript:

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

iDiv.innerHTML = "I'm the first div";

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";

function addDiv() {
    var newDiv = document.createElement('div');
    newDiv.className = 'block-3';
    iDiv.appendChild(newDiv);
    newDiv.innerHTML = "Another inner div";
}

有人可以解释一下我错了什么

Answer 1

检查此更新 fiddle ，基本上 addDiv 对 click 事件处理程序不可见，因为它不在全局范围内(因为它位于 domready 事件处理程序内部)

<script>
  var addDiv;
</script>

addDiv = function addDiv() {
    var newDiv = document.createElement('div');
    newDiv.className = 'block-3';
    iDiv.appendChild(newDiv);
    newDiv.innerHTML = "Another inner div";
  return false;
}