Javascript 在可编辑模式下添加新Div

我有以下用于编辑Div的JsFiddle，现在我想添加一个默认处于编辑模式

的
Div

当我点击
addnewdiv
时，会添加新div，然后可以通过点击
Edit
对其进行编辑。
但我想知道，当我点击AddNewDiv时，是否有一种方法，默认情况下，Div应该处于编辑模式。我有什么办法可以做到吗

以下是

感谢您的帮助：）
按如下方式更改您的功能：

 $("#add").click(function () {
     $('#accordion').prepend($("#appendpanel").clone().removeAttr('id').find('.panel-title, .panel-collapse').attr('contenteditable',true).css('border','2px solid'));
});

检查这个

根据评论

注:
做你想做的事还有其他的好方法。
您只需保留一个隐藏的可编辑div，添加其克隆并使其可见即可。。
或者创建一个动态添加所需标记的函数

旁注：请避免使用内联css，原因如下：

对于更改样式属性，jQuery有一个专用的
css（）
函数

您不需要两个
$（document）.ready（）
函数
不是一行，而是完成任务；）


更新：

在
$（'#accordion'）中使用此代码。在（'click'，'delete link'，function（）{

var children = $(".panel");
// get those not hidden
children = children.filter(
    function(index){
        return children.eq(index).css("display") !== "none"; 
    }
).length;

if(children === 1){  // the only child left is "Add new div"
     $("#message").show(500);
}

$("#message").hide(500);

在
$（“#add”）.中单击（函数（）{

var children = $(".panel");
// get those not hidden
children = children.filter(
    function(index){
        return children.eq(index).css("display") !== "none"; 
    }
).length;

if(children === 1){  // the only child left is "Add new div"
     $("#message").show(500);
}

$("#message").hide(500);

还有一个帮助，你知道我如何显示“无div present”的消息吗如果没有div，如果添加了新的div，则隐藏该消息。我会说这是某种黑客行为。OP想要在可编辑模式下附加链接，此解决方案只需手动触发编辑按钮即可。@RS26首先，我很抱歉响应太晚。电源突然切断，现在又回来了，这就是添加explanation@RS26我还在研究中。不得不说你的html太糟糕了…请避免使用内联样式…好的，等一下。我是新开发的，所以需要学习。请记住你的建议：）@RS26这里有所有的按钮，因为你不再需要编辑按钮，只需将其从html中删除..我确实需要编辑按钮，因为如果我单击“完成”，我应该能够再次编辑它谢谢，这很有帮助：）