javascript 在div添加内容
我是想做一个消息框，也就是外边一个可以垂直滚动的div名字是msgbox，然后呢动态添加div名字到msgbox里面来显示新消息。我写了一部分代码，发现div不支持wri...
我是想做一个消息框，也就是外边一个可以垂直滚动的div名字是msgbox，然后呢动态添加div名字到msgbox里面来显示新消息。
我写了一部分代码，发现div不支持write方法，所以就随便尝试几个还不行。
<html>
<head>
<Style type="text/css">
.divshow{
height:480px;
width:640px;
background-color:#bf9f0f;
}
.msgdiv{
height:100px;
width:640px;
background-color:#bfff0f;
}
</Style>
<Script type="text/javaScript">
function shownew()
{
var newmsg="<br><div class='msgdiv'>"+new Date().toLocaleString()+"</div>";
document.getElementById("msgplan").innerHTML=newmsg;//这里的代码如何写？也要考虑到代码性能问题
}
</Script>
</head>
<body>
<a href="#" onclick="shownew();">打印新消息</a>
<div class="divshow" id="msgbox">Hello Js!</div>
</body>
</html>
最好不要用innerHTML，这个非常麻烦，效率低。
我忘记了定义msgbox的div的垂直滚动的css样式了。 展开
我写了一部分代码，发现div不支持write方法，所以就随便尝试几个还不行。
<html>
<head>
<Style type="text/css">
.divshow{
height:480px;
width:640px;
background-color:#bf9f0f;
}
.msgdiv{
height:100px;
width:640px;
background-color:#bfff0f;
}
</Style>
<Script type="text/javaScript">
function shownew()
{
var newmsg="<br><div class='msgdiv'>"+new Date().toLocaleString()+"</div>";
document.getElementById("msgplan").innerHTML=newmsg;//这里的代码如何写？也要考虑到代码性能问题
}
</Script>
</head>
<body>
<a href="#" onclick="shownew();">打印新消息</a>
<div class="divshow" id="msgbox">Hello Js!</div>
</body>
</html>
最好不要用innerHTML，这个非常麻烦，效率低。
我忘记了定义msgbox的div的垂直滚动的css样式了。 展开
展开全部
document.getElementById("msgplan").innerHTML=newmsg;//这里的代码如何写？也要考虑到代码性能问题
改成
document.getElementById("msgplan").innerHTML += newmsg;//这里的代码如何写？也要考虑到代码性能问题
或
document.getElementById("msgplan").innerHTML = newmsg + document.getElementById("msgplan").innerHTML;
一个是新消息放在前面，一个是新消息放后面
改成
document.getElementById("msgplan").innerHTML += newmsg;//这里的代码如何写？也要考虑到代码性能问题
或
document.getElementById("msgplan").innerHTML = newmsg + document.getElementById("msgplan").innerHTML;
一个是新消息放在前面，一个是新消息放后面
追问
汗，佩服你了，竟然IE9通过。
DOM的方法怎么弄啊？
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看了代码，不懂！
如果不想用innerHTML，你试试用DOM方法：
creatElement方法和appendChild方法、creatTextNode方法
creatElement方法可以创建一个元素，
creatTextNode方法可以创建一个文本节点！
appendChild方法可以加入到某个文档的子节点！
详细资料你查下！
我写个例子给你：
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#css{
border:1px solid black;}
</style>
</head>
<body>
<div id="css">dd</div>
<script type="text/javascript">
var css=document.getElementById("css");
css.onclick=function(){
//创建一个p标签
var para=document.createElement("p");
加入到css里面
css.appendChild(para);
//创建一个动态文本
var text=document.createTextNode("加入的内容！");
加入到para里面
para.appendChild(text);
}
</script>
</body>
</html>
可以试试这个方法！
本人刚学javascript，希望能帮到你！
期望高手前来解决！
如果不想用innerHTML，你试试用DOM方法：
creatElement方法和appendChild方法、creatTextNode方法
creatElement方法可以创建一个元素，
creatTextNode方法可以创建一个文本节点！
appendChild方法可以加入到某个文档的子节点！
详细资料你查下！
我写个例子给你：
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#css{
border:1px solid black;}
</style>
</head>
<body>
<div id="css">dd</div>
<script type="text/javascript">
var css=document.getElementById("css");
css.onclick=function(){
//创建一个p标签
var para=document.createElement("p");
加入到css里面
css.appendChild(para);
//创建一个动态文本
var text=document.createTextNode("加入的内容！");
加入到para里面
para.appendChild(text);
}
</script>
</body>
</html>
可以试试这个方法！
本人刚学javascript，希望能帮到你！
期望高手前来解决！
追问
你写的事件委托很有用，但是你写得好像不对哦。
我把你的代码改了一下，因为我不知道怎么解决事件委托所用的div对象变量
function shownew()
{
var csp=document.getElementById("csp");
var para=document.createElement("p");
csp.appendChild(para);
var text=document.createTextNode("加入的内容！");
para.appendChild(text);
}
谢谢你的热心回答，呵呵，你很棒。
追答
楼主，记得如果解决问题，发份源代码过来共享下！qq邮箱：446390206@qq.com
谢谢！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
事实上innerHTML比操作DOM节点效率高哦。。
定义div的滚动条可以使用样式：
样式标签属性 样式属性 描述
overflow overflow 设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。
overflow-x overflowX 设置或获取当内容超出对象宽度时如何管理对象内容。
overflow-y overflowY 设置或获取当内容超出对象高度时如何管理对象内容。
定义div的滚动条可以使用样式：
样式标签属性 样式属性 描述
overflow overflow 设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。
overflow-x overflowX 设置或获取当内容超出对象宽度时如何管理对象内容。
overflow-y overflowY 设置或获取当内容超出对象高度时如何管理对象内容。
追问
但是你要重复把旧的内容和新的内容一起插入外Div啊，而且那个滚动条都是一直保持滚动到底部的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
