javascript - 动态地将一个 div 附加到另一个 div 之前

标签 javascript jquery html

当我点击“添加练习”时,我试图拥有它,一个新的可折叠引导 div 将添加到我的卡片 div 中。每次单击按钮时。我已经尝试了一段时间并阅读了这里的其他问题,但我似乎无法让它发挥作用。

我将我的代码添加到了 jsfiddle。有人能帮我让这个最终工作吗?

https://jsfiddle.net/dmngpo8e/4/

$('input[name="queue"]').click(function() {
  $("<div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#collapse1'>Collapsible panel</a></h4></div><div id='collapse1' class='panel-collapse collapse'><div class='panel-body'>Panel Body</div><div class='panel-footer'>Panel Footer</div></div></div></div>").html('item').appendTo('card');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<input class="btn teach_edit_header_buttons" style="font-family:Helvetica" name="queue" type="submit" value="Add Exercise">


<div class="card" style="padding:10px;background-color:#c7e0fc;">
</div>

最佳答案

.appendTo('card'); 应该是 .appendTo('.card'); .. 并使用 html('item') 在它之前,它只会用单词 item 更改整个 div html,因此您需要删除 html('item')

关于javascript - 动态地将一个 div 附加到另一个 div 之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49861581/

相关文章:

html - 框架 - 我发现 HTML5 不支持框架 - 这是否意味着如果 DOCTYPE 指定 HTML5 则不支持?

javascript - 如何在日历中仅显示当前日期?

javascript - 即使设置了 key,在 React 中也会收到 key prop 警告

javascript - 如果执行某些 php 脚本则刷新页面

javascript - 迭代 map 标记

jquery - Silverlight 和 "z-index"

javascript - Jquery:前置用 .load 检索的内容

javascript - 为什么 JavaScript 不支持多线程?

javascript - JS 或 Jquery 添加链接到列表项

javascript - jquery mobile - 如何在 1.4 中将动态创建的页面附加到 pagecontainer