Javascript 如何在divonclick下面添加按钮

我有一堆div卡，并排使用display:inline块，我想做的是当我点击一张卡时，它会在div下方添加一个按钮

我使用jquery的after（）函数来实现这一点，但它将按钮添加到div的右侧

拜托，我怎么做

PS：我试着使用append函数，但是我有另一个函数，当我再次单击div时会删除按钮，所以当我单击按钮（现在是div的一部分）时，就像你单击了div，按钮被删除了，所以它不起作用

谢谢大家!

编辑…

非常感谢您的回答

很抱歉没有显示代码，请看：

    <div class = "classOfDiv">
        here goes some product characteristics
    </div>


$('.classOfDiv').click(
    function() {
        //gets the border because I need it to see if I'm clicking for the first time or second time.
        var border = $(this).css("border");

        //checks the border
        if (border == "0px none rgb(51, 51, 51)") { 
            //change the border style to say that the div has been clicked
            $(this).css("border", "3px solid blue");
            //add the button
            $(this).after("<button name = 'btnDetalhes' class = 'btn btn-primary'>Detalhes</button>");  
        } else {
            //remove the border (now the div is diselected)
            $(this).css("border", "0px none rgb(51, 51, 51)");  
            //remove the button
            $(this).next("[name='btnDetalhes']").remove();
        }
    }
);

下面是一些产品特性
$（'.classOfDiv'）。单击(
函数（）{
//获取边框，因为我需要它来查看我是第一次单击还是第二次单击。
var border=$（this.css（“border”）；
//检查边境
如果（边框==“0px无rgb（51，51，51）”{
//更改边框样式，表示已单击该div
$（this.css（“边框”，“3px纯蓝色”）；
//添加按钮
美元（本）。在（“详情”）之后；
}否则{
//删除边框（现在已取消选择div）
$（this.css（“border”，“0px none rgb（51,51,51）”）；
//卸下按钮
$（this）.next（“[name='btnDetalhes']”）。remove（）；
}
}
);

我以前为论坛编写过代码；概念基本上是相同的，因此翻转它们，您将得到：

---

由于您还没有一个实际的答案，下面是一个非常粗略的概念，介绍如何使用显示/隐藏来实现我的建议

您需要指定“隐藏”按钮div的内容。如果该按钮应再次单击卡，则只需将

show（）

更改为

toggle

.card{
显示：内联块；
位置：相对位置；
宽度：100px；
高度：100px；
边框：1px纯黑；
保证金：5px；
文本对齐：居中；
光标：指针；
}
.卡片按钮{
显示：无；
位置：绝对位置；
底部：-22px；
左：-1px；
宽度：100%；
高度：20px；
边框：1px纯红；
}

卡片内容

按钮

$（文档）.ready（函数（）{
$（“.card”）。单击（函数（）{
$（此）。附加（“”）；
});
});
.card{
显示：内联块；
位置：相对位置；
宽度：200px；
高度：100px；
边缘底部：40px；
背景颜色：黄色；
}
.按钮{
位置：绝对位置；
底部：-30px；
}

A.
B
C
D
E
F
g
您的代码在哪里？您可以发布代码吗？您应该考虑隐藏/显示按钮，而不是尝试将它们注入html。将一个元素置于另一个元素之后并不意味着它显示在另一个元素之下。这就是css的用途。。。也要阅读很多解决方案…如果没有您的code@GabrielAugusto你能创建一个吗？谢谢你的回答。这就是想法，唯一的问题是当我第一次单击按钮时，它会更改该div的边框并显示该按钮。好吧，到现在为止。但是，当我再次点击div时，它已将边框绘制回正常边框并删除按钮。当我点击按钮时，它的行为就像你点击了div，所以按钮会消失。这是主要问题。。。当我点击按钮时，有没有一种方法可以忽略div的行为？你真的需要发布你的完整代码，以便任何人给出完整的解决方案。我想我理解您遇到的问题，可以通过将
event.stopPropogation（）
添加到单击事件处理程序中来解决。但是如果没有看到你的代码，很难说它应该放在哪里。谢谢，伙计。event.stopPropagation（）解决了我的问题！你想发布一个答案吗？这样我就可以核对一下答案了？我对代码感到抱歉，我认为描述中的代码不够，但是你得到了问题并解决了它。使用event.stopPropagation（）可以防止在我单击按钮的那一刻单击div，这就像一个符咒！谢谢我更新了我的答案以包含它。祝你好运！