Javascript 单击按钮后加载内部div

我有一个不可见的divby

显示：none

我需要在点击按钮后加载div，而不是在页面加载

注意:

我说的是在点击按钮后加载div，我不是说显示div

我不想在页面加载上加载div

HTML在这里：

<input id="btn" type="button" value="Load Div" />
<div class="content" style="display: none;">
    <img src="http://www.kippaxvet.com.au/Portals/kippaxvet/cute%20pup.jpg" />
</div>

我该怎么做

任何想法都将不胜感激

---

编辑{详细信息}：

我有一个div，里面有很多元素和图像

如果我在PageLoad上加载那个div，它会很重，而且需要很长时间

当用户想要显示该div时，我只需要加载该div。

尝试以下操作：

<input id="btn" type="button" value="Load Div" onclick="load()"/>

function load()
{
  var imgDiv = document.createElement('div');
  $(imgDiv ).addClass('content');
  $(imgDiv).append('<img id="dynamicImg" src="http://www.kippaxvet.com.au/Portals/kippaxvet/cute%20pup.jpg" />')
  // add the imgDiv to your parent container element. 
  // for e.g. $("#container").append(imgDiv)
}

函数加载（）
{
var imgDiv=document.createElement（'div'）；
$（imgDiv）.addClass（'content'）；
$（imgDiv）.附加（“”）
//将imgDiv添加到父容器元素中。
//例如$（“#容器”）。附加（imgDiv）
}

---

JsFiddle:

您可以研究使用JavaScript创建div并将其添加到DOM中

document.createElement（'div'）

@RickHoving关于

img

和div中的所有内容呢？我不知道在什么用例中，您希望附加一个元素而不仅仅是显示它。你能解释一下为什么你选择用这个方法来解决这个问题吗？也许这个链接可以帮助你：@samfirst-post已经更新了。