Question

我有一个按钮和一个div，我想在每次点击按钮时附加这个div 一次，但我有一个问题，这个div的HTML代码非常大而我不想要那个，所以我的问题是有另一种方法来附加这个div而不将整个代码放在我的js代码中吗？另一个问题我想只在每次点击时附加一次div但它会多次追加，这是我所谈论的一个例子，我用一个小的替换了我的大型HTML代码，所以这是我的代码：

＆＃13;

$(".appendbtn").click(function () {
   $(".appendme").append('<div class="appendme">The div that should be appended</div>');
});

＆＃13;

<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div class="appendme">The div that should be appended</div>
<button class="appendbtn" type="button">Click to append</button>

＆＃13;

Answer 1

此处的大量答案指出了您的命名错误（＆＃39; appendme＆＃39;用于容器和正在追加的项目）但您的问题是您有一个要追加的大字符串。您要附加的对象可以放在脚本标记中：

<script type="text/html" id="appendTemplate">
    <div>The div that should be appended</div>
</script>

现在您的追加代码将是：

$(".appendbtn").click(function () {
    var template = $('#appendTemplate").html();
    $(".appendme").append(template);
});

单击该按钮时，脚本标记的html内容将被读入变量＆＃39;模板＆＃39;然后将其附加到目标元素。

Answer 2

通过添加容器轻松修复。

这应该可以解决问题：

$(".appendbtn").click(function () {
   $("#divcontainer").append('<div class="appendme">The div that should be appended</div>');
});

<script
  src="https://code.jquery.com/jquery-2.2.3.min.js"
  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
  crossorigin="anonymous"></script>
<div id="divcontainer">
  <div class="appendme">The div that should be appended</div>
</div>
<button class="appendbtn" type="button">Click to append</button>

Answer 3

问题是您附加到<div>的{{1}}还有一个.appendme类。因此，当您点击该按钮时，新的.appendme将附加到已附加的所有其他新<div>。

要解决此问题，请删除该类或重命名要追加的新<div class="appendme">的类。

<div>

$(".appendbtn").click(function () {
   $(".appendme").append('<div>The div that should be appended</div>');
});

Answer 4

我会这样做：

counter

$(".appendbtn").click(function () {
   $(".appendme:last").append(getHtml());
});

function getHtml(){
  return '<div class="appendme">The div that should be appended</div>';
}

upd：html的功能（来自评论）

点击一下div

4 个答案: