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

檢查此更新的提琴 ，基本上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;
}

Answer 2

首先，您不需要href ，只有onclick會很重要，因此使其可以在任何html標記上使用，而不僅是<a>的

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

onclick不需要; 在函數的末尾，這是一個分配，您沒有調用它

Answer 3

我更喜歡在JS中分配方法。 通過獲取該鏈接並將addDiv放入其click事件處理程序中，在JS中設置事件偵聽器。

使用代碼進行演示

基本變化-

JS：

document.getElementById("joe").addEventListener("click", addDiv, false);
...
function addDiv( event ) {
    event.preventDefault();
    ...
}

HTML：

<a href="#" id="joe">Add Div</a>

您不必使用ID，這只是本示例中最方便的方法。 我建議您這樣做，但是如果可以的話。