Javascript 如何将类和id设置为不带'；jquery不会相互影响吗？

我做了一个简单的聊天室。我希望注释有不同的部分，因此我使用此代码将id和类设置为div

$('<div id="fullBox">'+inpx+'</div>').addClass('showMessage').appendTo('#mainbox');

我的班级呢

.showMessage{
width :1000 px;
background-color:#03C;
word-wrap:break-word;
line-height :1.3 em;
font-size :24 px;
}

我的id有更大的空间，我希望我的类有更小的空间容纳我的文本，但我的文本跟随我的id，我不知道如何解决它

我使用两种不同的背景色来看到它们，如果我能看到它们，我就得到了答案

链接代码：

---

我想知道如何让自动滚动条自动显示新帖子。

要填充所有空间，您必须设置

宽度：100%

，如下所示

$（文档）.ready（函数（）{
$（'.btn'）。在（'click'，function（）上{
var inpx=$（'.inBox'）.val（）；
$（'.inBox'）.val（“”）；
$（“”+inpx+“”）.addClass（'showMessage'）.appendTo（'#mainbox'）；
});
});
#主框{
边缘顶部：10px；
浮动：左；
宽度：500px；
高度：200px；
左边距：9px；
背景：url（../img/dash.png）；
盒影：-1px 2px 1px#dcdc；
边框：1px实心#c9c9c9；
边界半径：5px；
左边框：0.5em实心#06F；
z指数：900；
溢出y：自动；
}
#底盒{
边缘顶部：10px；
浮动：左；
宽度：500px；
高度：100px；
左边距：9px；
背景：url（../img/dash.png）；
盒影：-1px 2px 1px#dcdc；
边框：1px实心#c9c9c9；
边界半径：5px；
左边框：0.5em实心#06F；
}
.收件箱{
边缘顶部：30px；
宽度：400px；
高度：30px；
左边距：5px；
字体系列：Gotham，“Helvetica Neue”，Helvetica，Arial，无衬线；
字号：18px；
调整大小：无；
}
.btn{
位置：相对位置；
顶部：-18px；
左边距：5px；
宽度：60px；
高度：65px；
字体系列：Gotham，“Helvetica Neue”，Helvetica，Arial，无衬线；
字号：18px；
}
#满箱{
宽度：100%；
保证金：5px；
背景色：#ccc；
}
.showMessage{
宽度：100%；
背景色：#000；
单词包装：打断单词；
线高：1.3em；
字体大小：24px；
}
每次单击都可以添加一个效果，滚动到div的底部。只需将此代码添加到上的
（“单击”，函数（）{
，在
append
函数之后

$('#mainbox').animate({ scrollTop: $("#mainbox").height() }, "fast");

$('#mainbox').animate({ scrollTop: $("#mainbox").height() }, "fast");