使用javascript/Jquery动态生成Div

我有下面一个DIv的HTML代码，我想知道是否有方法可以使用Javascript/Jquery以编程方式创建相同的DIv

或者，是否有一种方法可以将具有class

“panel panel default”

的div追加到具有ID

accordion

的div中，每次都将其作为第一个元素。

---

感谢您的帮助

除了使用createElement并分配所有属性并按正确的层次顺序添加它们之外，还有几种方法可以做到这一点

1） 将元素作为文本括起来，并使用

$.parseHTML（htmlString）

返回DOM节点。（这是jquery）

2） 将html粘贴到

标记中，其类型设置为类似

type=“html”

。这样做的好处是，如果脚本具有

id

，则可以通过document.getElementById（“idOfScriptTag”）引用它。如果浏览器无法识别脚本标记的类型，它将不会解析脚本标记的内容，因此您可以将其留在页面上，直到您需要它为止。

您可以使用或

prepend（）

$('#accordion').prepend("<div> this is new div</div>");

$（“#手风琴”）.prepend（“这是新的div”）；

因为您希望在每次单击时复制html。您应该使用唯一的id（#appendpanel每次都在复制）并使用
clone（）
。为了避免重复，您可以尝试使用此方法（使用类名代替id）


如果我理解正确，您希望在DOM中的特定位置通过javaScript/jquery添加一些html代码

$(".some_class_of_div" ).html(
                                '<div class="class1" style="position:absolute; width:25px !important; display:none;">\
                                        <img class="class2" src="http://xylz.com/static/img/black.png" style="width:30px;height:17px;padding-left: 10px;display:none;" title="try by click" >\
                                        <div class="class3" style="position:absolute; width:25px !important; padding-left: 10px;display:none;">\
                                            <img class="class4" src="http://xylz.com/static/img/border.png" style="width:20px;">\
                                            <div class="class5" style="position:absolute; width:25px !important;display:none;">\
                                                <img class="class6" src="http://xylz.com/static/img/settings.png" style="width:20px;">\
                                            </div>\
                                        </div>\
                                </div>\
                                <form class="class7" method="get" style="display:none;" accept-charset="utf-8">\
                                    <input name="some_id" type="hidden" value="1">\
                                </form>');

$（“.some-class-of-div”）.html(
'\
\
\
\
\
\
\
\
\
\
\
');

在这里，我使用了一个div类并添加了一些html。html可以是您想要的任何内容。您也可以使用id代替类。希望这会有所帮助。
您需要更改标记以添加一些id

<a id="clone">Add</a>

演示：
“每次追加为第一个元素”您可以完成。这是可能的。但是您什么时候创建它呢？
$（“#accordion”）.prepend（“”）
？顺便说一句，使用.clone（）。你的意思是说，当你克隆了div并对其进行编辑时，编辑后的div将被克隆。是这样吗？先生，我试过了，但它只预加了一次，我想每次单击ADDIt clones时都预加一次，但单击事件不会像对克隆的div进行编辑和完成一样工作：（即使单击事件工作并且编辑完成，它也会在下一次单击时显示已编辑的div，而不是原始div右侧？？尽管这是不同的问题。右键是：如果有帮助，请不要忘记标记此答案。如果我克隆，则单击事件将不工作，我在每个div上都有“编辑并完成”选项。先生，单击事件现在工作，但如果我编辑了一个div，然后再次单击“添加”，它将显示编辑的div，而不是原始div:（@RS26您可以在添加时在fiddleEdited js中重新创建问题吗？fiddle将添加新div。编辑新div并单击“完成”。然后再次单击“添加”，它将显示编辑的div，而不是空白div:（这是因为重复的ID-$（“#accordion”）。prepend（$（“#appendpanel”）.clone（）.removeAttr（'id'）-
<div style="display:none" id="addme">...</div>

jQuery(function ($) {
    var $cp = $('#addme');
    $('#clone').click(function(){
        $cp.children().clone().prependTo('#accordion')
    })
});