如何动态创建div，同时将其引用到类中？

在这里搜索得很远，但似乎无法找到答案！这是作业！所以我不期望任何人为我写任何东西，只是为了帮助我:)如何动态创建div，同时将其引用到类中？

我正在尝试使用一个帖子按钮有一个HTML消息框。点击发布按钮后，该消息与日期一起发布到下面的div中。这可以做很多次，最新的发表在最古老的发表。我尝试的方法是每次创建一个新的div，并将它们全部分配给我的CSS文档中的同一个类。消息和日期必须分配在单独的'p'标签中，并分配了自己的类别。如果有人知道一个更好的方法，我是全部耳朵。虽然，我的JavaScript文档必须是外部的。

我现在有这样的代码：

function createComment(){ 
var message = ""; 
var divTag = document.createElement("div"); 
divTag.className = "commentDiv"; 
divTag.innerHTML = Date(); 
message=document.getElementById("textBox").value; 
document.getElementById("comments").innerHTML=message; 
}

我试图创建DIV，然后给它“commentDiv”的ID，因为这是我的CSS文档中的DIV的ID已经风格。然后我在内部HTML中发布日期，并将文本框中的值保存到名为'message'的变量中。然后，我尝试尝试将消息打印到ID为'comments'的段落标记中。我是非常新的网络Javascript。说实话，我真的不知道我在做什么哈哈。非常感谢所有帮助。谢谢！

来源

2013-02-14 Fizzix

使用'id'而不是'className'？ – 2013-02-14 03:02:55

如果我使用ID，那么每个页面只能创建一个div。 – Fizzix 2013-02-14 03:04:01

然后你的风格规则不能适用于那个div – 2013-02-14 03:15:59

我想你在找什么东西像

var ct = document.getElementById('comments') 

function create(){ 
    var divTag = document.createElement('div'); 
    divTag.className = 'comment'; 

    var p1 = document.createElement('p'); 
    p1.className = 'date'; 
    p1.innerHTML = new Date(); 
    divTag.appendChild(p1) 

    var p2 = document.createElement('p'); 
    p2.className = 'message'; 
    p2.innerHTML = 'nop'; 
    divTag.appendChild(p2); 

    ct.appendChild(divTag); 
}

演示：Fiddle。

appendChild()可用于将子元素追加到节点。

来源

2013-02-14 03:18:12

'divTag'没有定义 – sevaor 2013-02-14 03:27:05

[小提琴]（http://jsfiddle.net/Bnqyb/1/） – sevaor 2013-02-14 03:29:38

哇！这正是我需要的。非常感谢你的帮助！ – Fizzix 2013-02-14 04:51:45

如何动态创建div，同时将其引用到类中？

回答

相关问题