使用JavaScript/JQuery动态创建Div

Question

我有一个DIv的HTML代码，想知道是否可以使用JavaScript / jQuery编程方式创建相同的DIV。

或者是否有一种方法可以将具有"panel panel-default"类的DIV追加到ID为accordion的DIV中，并使其成为每次的第一个元素。

谢谢您的帮助。

- Richa

---

“每次将其附加为第一个元素” <- 你是指要插入到开头吗？ - adeneo

你可以做到。这是可能的。但是你什么时候创造它？ - witherwind

$('#accordion').prepend('<div class="panel panel-default" id="panel1"></div>')? - Arun P Johny

顺便提一下，使用 .clone()。那应该就可以了。 - witherwind

你的意思是当你克隆 div 并对其进行编辑时，被编辑过的 div 会被克隆。是这样理解吗？ - witherwind

Answer 1

你可以使用 .prepend() 或 .prependTo()。 prepend() 将要添加的元素放在第一个索引位置。

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

如果您想在单击时每次复制HTML，请使用唯一的ID（#appendpanel每次都会重复），并使用clone()。为了避免重复，您可以尝试这个方法（使用类名而不是ID）
避免复制ID演示

样例实时演示

- Awlad Liton

---

先生，我试过了，但它只在最开始添加一次，我希望每次点击“添加”时都能添加。 - Richa

它可以完美地克隆，但是克隆的div上的点击事件不起作用，就像编辑和完成一样 :( 即使点击事件起作用并且编辑完成，下一次点击将显示编辑后的div而不是原始div，对吧？ - Richa

虽然这是不同的问题。这里是正确的fiddle：http://jsfiddle.net/Zegb9/7/ 如果有帮助，请不要忘记标记此答案。 - Awlad Liton

Answer 2

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

1）将元素作为文本包含，并使用$.parseHTML（htmlString）返回DOM节点。（这是jquery）

2）将html粘贴在<script>标记内，将其类型设置为type="html"之类的内容。这样做的好处是，如果脚本有一个id，您可以通过document.getElementById（“idOfScriptTag”）引用它。如果浏览器不识别其类型，则不会解析脚本标记的内容，因此您可以将其留在页面上直到需要它。

- James Bruckner

Answer 3

如果我理解正确，您想通过JavaScript / jQuery在DOM的特定位置添加一些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>');

在这里，我使用了一个 div 的类并添加了一些 HTML 内容。HTML 可以是任何你想要的。你也可以使用 id 而不是 class。希望这有所帮助。

- Aameer

Answer 4

您需要更改标记以添加一些id。

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

那么

<div style="display:none" id="addme">...</div>

那么

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

演示：Fiddle

- Arun P Johny

---

先生，如果我克隆，那么点击事件将不起作用，我在每个div上都有编辑和完成选项。 - Richa

@RS26，你能在 Fiddle 中重新制造一下这个问题吗？ - Arun P Johny

这是因为有重复的ID - $('#accordion').prepend($("#appendpanel").clone().removeAttr('id')); - http://jsfiddle.net/arunpjohny/Zegb9/6/ - Arun P Johny

确实如此。我之前评论过这个问题，似乎被忽略了。 - witherwind

@RS26 那会更好...因为我现在必须离开，可能无法继续处理它...如果您发布不同的问题，其他人可能会帮助您。 - Arun P Johny