使用href链接动态添加div

时间:2016-01-30 19:17:44

标签: javascript html dynamic

我尝试使用链接和一些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";
}

有人可以解释我的错误吗

3 个答案:

答案 0 :(得分:0)

检查这个更新的fiddle,基本上addDiv对于click事件处理程序是不可见的,因为它不在全局范围内(因为它在domready事件处理程序中)

enum

答案 1 :(得分:0)

首先,您不需要href,只有onclick才重要,因此可以在任何html标记上使用,而不仅仅是<a>

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

onclick在你的函数结尾处没有;,它是一个赋值,你不是在调用它

答案 2 :(得分:0)

我更喜欢分配JS方法。通过抓取该链接并将addDiv放入其document.getElementById("joe").addEventListener("click", addDiv, false); ... function addDiv( event ) { event.preventDefault(); ... } 事件处理程序中,在JS中设置事件侦听器。

Demo using your code

基本变化 -

<强> JS:

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

<强> HTML:

private async void F()
{
    button.IsEnabled = false;
    await Task.Delay(1000);
    button.IsEnabled = true;
}

您不必使用ID,这只是此示例中最方便的方式。如果那是你的选择,我推荐它。