Question

如何使用javascript创建具有类名的元素？

我试图创建像这样的元素

<div class ="dialog_red_top_page">
    <div class ="inner_dialog_red_top_page">
        <p class="dialog_red_top_page_text">
            test
        </p>
    </div>
</div>

通过使用javascript而不是工作，我该怎么做？

http://jsfiddle.net/n5phf/186/

<script type="text/javascript">
$(window).load(function(){        
    $('#myBtn').click(function(){
        var div = $('<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p></div></div>');    
        div.html("test");
        div.appendTo('#wrapper');

    });
});
</script>

Answer 1

1st：引号的问题使用“围绕类而不是单个

第二：使用div.html("test");，您将div html更改为<div>test</div>

你可以使用.html（）作为包装器

$('#myBtn').click(function(){
    var div = $('<div class ="dialog_red_top_page"><div class ="inner_dialog_red_top_page"><p class="dialog_red_top_page_text"">test</p></div></div>');    
    $('#wrapper').html(div);
    // you can try .append instead of .html()  just give it a try
    //$('#wrapper').append(div);
    //$(div).appendTo('#wrapper');

});

Working Demo

Answer 2

按"而不是'换行班级名称，然后移除div.html("test");。它表示用test替换所选元素的html，这意味着它会移除.inner_dialog_red_top_page并将其替换为test。

Jsfiddle

Answer 3

你的报价都是单引号

这样做

var div = $('<div class="dialog_red_top_page">'
  + '<div class="inner_dialog_red_top_page">'
  + '<p class="dialog_red_top_page_text">test</p>'
  + '</div></div>'
);

Answer 4

使用\'转义所有'字符：

var div = $('<div class =\'dialog_red_top_page\'><div class =\'inner_dialog_red_top_page\'><p class=\'dialog_red_top_page_text\'>test</p></div></div>');

你的代码实际上做的是：在里面创建一个带div和段落的div，然后你调用：

div.html("test");

覆盖.dialog_red_top_page div。

的内容

jsfiddle

Answer 5

你的代码应该是这样的：

$('#myBtn').click(function(){
        $("<div class ='dialog_red_top_page'><div class ='inner_dialog_red_top_page'><p class='dialog_red_top_page_text'>test</p> </div></div>").appendTo('#wrapper');

    });

如何使用javascript创建具有类名的元素？

5 个答案: