我有一个主容器 div 和一个侧边栏 div。单击其中一个侧边栏 div 时,我想创建一个位于容器 div 内的 div。这是我到目前为止所拥有的。
<script>
$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});
function popUp(){
var popup = document.createElement('div');
popup.className = 'box3';
</script>
<ul id="container" style="position:relative;width:815;height:870;margin:20px;background-color:gray;">
<li class="box2"></li>
</ul>
<div style="position:absolute;top:20;left:850;height:870px;width:320px;background-color:yellow;padding-left:15px;float:left;">
<div id="add3" class="box3" style="height:15%;width:40%;" onclick="popup()" >Click Me to Add</div>
<br/>
<div id="add2" class="box2" style="height:15%;width:80%;">Click Me to Add</div>
</div>
想法?有什么建议吗?
最佳答案
一些简单的东西,比如:
function popUp(){
$('<div>').addClass('box3').appendTo('#container');
}
在哪里$('<div>')
使用 jQuery 创建一个新的 DIV 元素,其中添加了一个类,然后将其附加到容器*。
您还应该在代码中附加点击监听器(去掉 onClick=
):
$('#add3').click(function(){
$('<div>').addClass('box3').appendTo('#container');
});
JSFiddle:http://jsfiddle.net/TrueBlueAussie/K269E/3/
所以你的完整代码结束是这样的:
$(function () {
$("#container").sortable();
$("#container").disableSelection();
$('#add3').click(function () {
$('<div>').addClass('box3').appendTo('#container');
});
});
当然,新的 div 中没有任何内容,但是您还没有指定接下来要用它做什么
更新以使用 LI:http://jsfiddle.net/TrueBlueAussie/K269E/7/
$('<li>').addClass('box3').text("hello").appendTo('#container');
这将向您的容器 UL 添加新的 LI(例如简单地说“你好”)。
注意事项:
你想要注入(inject) DIV
进入 UL
( id=container
),这是无效的 HTML 标记。您需要更清楚地了解预期用途。
关于javascript - 创建 Div 并追加到另一个 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24122631/