Javascript 动态创建的div

我试图动态地创建div，但是我没有找到正确的方法来实现它

我想在单击正文中的第一个div时显示一个名为options的div，其中包含4个其他div

<div id="mot">mot</div>

<script type="text/javaScript"> 

     $(document).ready(function () {
        $("#mot").click(function () {
        $options= $('<div class="past"/></div><div class="syno"/></div><div class="anto"/></div><div class="trans"/></div>').text('HELLO');
        $('body').append($options);
    });
});

mot
$（文档）.ready（函数（）{
$（“#mot”）。单击（函数（）{
$options=$（''）.text（'HELLO'）；
$（'body'）。追加（$options）；
});
});

我可以改变什么，让每个div都有自己的文本，而不是所有div的Hello

另一个问题，然后显示我要创建新div的div“options”，例如，单击.pass时显示红色div，单击.syno时显示蓝色div。我在考虑一个if/else参数，但我不确定

这些是这个基本代码的几个问题，可能很容易解决，但我是jquery的初学者。

---

谢谢，

您将关闭

div

两次：

<div class="past"/></div>
                 ^  ^
            closed two times

在css文件中定义颜色：

.pastColor{
    background-color: red;
}
.synoColor{
    background-color: yellow;
}
.antoColor{
    background-color: green;
}
.transColor{
    background-color: blue;
}

---

您可以找到JSFIDLE演示

您正在关闭

div

两次：

<div class="past"/></div>
                 ^  ^
            closed two times

在css文件中定义颜色：

.pastColor{
    background-color: red;
}
.synoColor{
    background-color: yellow;
}
.antoColor{
    background-color: green;
}
.transColor{
    background-color: blue;
}

您可以找到JSFIDLE演示

试试这个

$(document).ready(function () {
    $("#mot").click(function () {
        var $options = $('<div class="options" />');
        var $past = $('<div class="past" />').text("past");
        var $syno = $('<div class="syno" />').text("syno");
        var $anto = $('<div class="anto" />').text("anto");
        var $trans = $('<div class="trans" />').text("trans");

        $options.append($past)
            .append($syno)
            .append($anto)
            .append($trans);

        $('body').append($options);
    });
});

$（文档）.ready（函数（）{
$（“#mot”）。单击（函数（）{
var$选项=$（''）；
var$pass=$（''）.text（“pass”）；
var$syno=$（''）.text（“syno”）；
var$anto=$（''）.text（“anto”）；
变量$trans=$（''）.text（“trans”）；
$options.append（$pass）
.append（$syno）
.append（$anto）
.附加（$trans）；
$（'body'）。追加（$options）；
});
});

只需将其分解为更小的动作（生成更多元素），然后可以根据需要修改它们，然后再将它们添加到主体中

注意：创建

$option

时，您的html格式不正确。您是这样关闭每个div标记的，

，但随后是一个关闭div标记

。您只需要一个或另一个-此示例代码不能做到这一点。

试试这个

$(document).ready(function () {
    $("#mot").click(function () {
        var $options = $('<div class="options" />');
        var $past = $('<div class="past" />').text("past");
        var $syno = $('<div class="syno" />').text("syno");
        var $anto = $('<div class="anto" />').text("anto");
        var $trans = $('<div class="trans" />').text("trans");

        $options.append($past)
            .append($syno)
            .append($anto)
            .append($trans);

        $('body').append($options);
    });
});

$（文档）.ready（函数（）{
$（“#mot”）。单击（函数（）{
var$选项=$（''）；
var$pass=$（''）.text（“pass”）；
var$syno=$（''）.text（“syno”）；
var$anto=$（''）.text（“anto”）；
变量$trans=$（''）.text（“trans”）；
$options.append（$pass）
.append（$syno）
.append（$anto）
.附加（$trans）；
$（'body'）。追加（$options）；
});
});

只需将其分解为更小的动作（生成更多元素），然后可以根据需要修改它们，然后再将它们添加到主体中

---

注意：创建

$option

时，您的html格式不正确。您是这样关闭每个div标记的，

，但随后是一个关闭div标记

。您只需要一个或另一个-此示例代码不能做到这一点。

您也可以在一行中完成这一切

$('<div class="past">Hello</div><div class="syno">Goodbye</div><div class="anto">Something else</div><div class="trans">Another thing</div>').appendTo('Body');

$（'hellogodbyesomething elseAnother thing'）。附加到（'Body'）；

这是小提琴：

要让已创建的div在单击时创建新div，只需使用另一个click（）函数。要向创建的div添加颜色，请使用jquery的.css（）函数

$('.past').click(function(){
    $('<div class="option1">Option</div>')
    .appendTo('body')
    .css('background','red');
 });

$（'.pass'）。单击（函数（）{
$（“选项”）
.appendTo（'正文'）
.css（'background'，'red'）；
});

由于您将动态创建新的div，它们最初不会绑定任何javascript函数，因此您需要调用一个函数来绑定click事件。请参见更新的小提琴以获取示例

---

您也可以在一行中完成这一切

$('<div class="past">Hello</div><div class="syno">Goodbye</div><div class="anto">Something else</div><div class="trans">Another thing</div>').appendTo('Body');

$（'hellogodbyesomething elseAnother thing'）。附加到（'Body'）；

这是小提琴：

要让已创建的div在单击时创建新div，只需使用另一个click（）函数。要向创建的div添加颜色，请使用jquery的.css（）函数

$('.past').click(function(){
    $('<div class="option1">Option</div>')
    .appendTo('body')
    .css('background','red');
 });

$（'.pass'）。单击（函数（）{
$（“选项”）
.appendTo（'正文'）
.css（'background'，'red'）；
});

由于您将动态创建新的div，它们最初不会绑定任何javascript函数，因此您需要调用一个函数来绑定click事件。请参见更新的小提琴以获取示例

---

您可以分别创建四个div，然后单击即可将其附加到正文中

下面是执行相同操作的代码

var div1 = jQuery('<div/>', {
    text: 'text1'
});
var div2 = jQuery('<div/>', {
    text: 'text2'
});
var div3 = jQuery('<div/>', {
    text: 'text3'
});
var div4 = jQuery('<div/>', {
    text: 'text4'
});

$("#mot").click(function () {

    $('body').append(div1,div2,div3,div4);
}); 

var div1=jQuery（“”{
文本：“text1”
});
var div2=jQuery（“”{
文本：“text2”
});
var div3=jQuery（“”{
文本：“text3”
});
var div4=jQuery（“”{
文本：“text4”
});
$（“#mot”）。单击（函数（）{
$（'body'）.append（div1、div2、div3、div4）；
}); 

这是同样的小提琴

---

您可以分别创建四个div，然后单击即可将其附加到正文中

下面是执行相同操作的代码

var div1 = jQuery('<div/>', {
    text: 'text1'
});
var div2 = jQuery('<div/>', {
    text: 'text2'
});
var div3 = jQuery('<div/>', {
    text: 'text3'
});
var div4 = jQuery('<div/>', {
    text: 'text4'
});

$("#mot").click(function () {

    $('body').append(div1,div2,div3,div4);
}); 

var div1=jQuery（“”{
文本：“text1”
});
var div2=jQuery（“”{
文本：“text2”
});
var div3=jQuery（“”{
文本：“text3”
});
var div4=jQuery（“”{
文本：“text4”
});
$（“#mot”）。单击（函数（）{
$（'body'）.append（div1、div2、div3、div4）；
}); 

这是同样的小提琴

---

只需分别创建每个

div

，然后逐个追加它们。或者分别创建它们，

.add（）

将它们添加到单个对象中，然后立即将它们全部追加。哇，感谢所有人的快速响应，我现在将采用Archer解决方案，并尝试解决问题的第二部分。只需分别创建每个

div

，然后逐个追加它们。或者分别创建它们，

.add（）

将它们添加到单个对象，然后一次将它们全部附加。哇，感谢大家的快速响应，现在我将采用Archer解决方案，并将尝试解决问题的第二部分。好的，谢谢，因此对于动态创建的每个新div，我必须调用一个新函数？如果您想创建具有类选项的div，如果它里面有其他的div，那么把它放在一个函数中是有意义的，这样你就可以随时调用它