javascript - 动态创建的 div

Question

我正在尝试动态创建div，但我没有找到正确的实现方式。

当单击 body 中的第一个 div 时，我想显示 1 个名为 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);
    });
});

我可以更改什么以使每个 div 都有自己的文本而不是为所有 div 都使用 Hello？

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

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

Answer 1

试试这个...

$(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);
    });
});

只需将它分解成更小的 Action (制作更多元素)，然后您可以根据需要修改它们，然后再将它们添加到正文中。

注意:创建 $option 时，您的 html 格式错误.你像这样关闭每个 div 标签，<div /> , 然后在它后面加上一个关闭的 div 标签 </div> .您只需要其中之一 - 此示例代码不会那样做。