js使用dom操作实现简单留言板的方法
来源: 阅读:1035 次 日期:2016-06-17 09:33:49
温馨提示: 小编为您整理了“js使用dom操作实现简单留言板的方法”,方便广大网友查阅!

如图所示简易留言板,也就是自娱自乐版,说白了就是练习dom操作。

js使用dom操作实现简单留言板的方法三联

要点一:document.createelement(标签名) 新建元素

要点二:父元素.appendchild(元素) 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来

要点三:父元素.insertbefore(元素,要插入哪个元素的前面) 把新建的元素插入到页面中指定的标签前面,这样后面输入的内容才会显示到前面

要点四:父元素.removechild(元素) 删除指定元素

下面,上代码:

代码如下:

<!doctype html>

<html>

<head>

<meta charset=utf-8 />

<title>无标题文档</title>

<script>

window.onload = function(){

var omsg = document.getelementbyid(msg);

var obtn = document.getelementbyid(btn);

var omsg_c = document.getelementbyid(msg_c);

var oul = document.createelement(ul);

omsg_c.appendchild(oul);

obtn.onclick = function(){

var sval = omsg.value;

var oli = document.createelement(li);

oli.innerhtml = sval + <span>删除</span>;

var oli1 = oul.getelementsbytagname(li);

if(oli1.length>0){

oul.insertbefore(oli,oli1[0]);

}else{

oul.appendchild(oli);

}

omsg.value='';

var ospan = document.getelementsbytagname(span);

for(var i=0; i<ospan.length; i++){

ospan[i].onclick = function(){

oul.removechild(this.parentnode);

}

}

}

}

</script>

</head>

<body>

<h1>简易留言板</h1>

<input id=msg type=text size=40 value=>

<input id=btn type=button value=留言>

<div id=msg_c></div>

</body>

</html>

更多信息请查看脚本栏目
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map