JavaScript 实现的留言的效果

最新推荐文章于 2024-06-15 17:55:19 发布

chenghaibing2008

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量1.5k

点赞数

分类专栏：网络技术文章标签： javascript insert table input button border

本文链接：https://blog.csdn.net/chenghaibing2008/article/details/7993938

版权

网络技术专栏收录该内容

115 篇文章 1 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function insertStr() {
var f = document.form1;
var value = f.str.value;
if(value!="") {
  // 从最终的TextNode节点开始，慢慢形成<tbody>结构
  var text = document.createTextNode(value); //新建一个TextNode节点
  var td = document.createElement("td"); //新建一个td类型的Element节点
  var tr = document.createElement("tr"); //新建一个tr类型的Element节点
  var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点
  td.appendChild(text); //将节点text加入td中
  tr.appendChild(td); //将节点td加入tr中
  tbody.appendChild(tr); //将节点tr加入tbody中
  var parNode = document.getElementById("table1"); //定位到table上
  parNode.insertBefore(tbody,parNode.firstChild); //将节点tbody插入到节点顶部
  //parNode.appendChild(tbody); //将节点tbody加入节点尾部
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
    <input name="str" type="text" id="str" value="">
    <input name="insert" type="button" id="insert" value="留言" onClick="insertStr()">
</form>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
<tbody>
    <tr>
        <td height="25">网友留言列表：</td>
    </tr>
</tbody>
</table>
</body>
</html>

chenghaibing2008

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现的留言的效果

无标题文档function insertStr() { var f = document.form1; var value = f.str.value; if(value!="") { // 从最终的TextNode节点开始，慢慢形成结构 var text = document.createTextNode(value); //新建一个TextNode节点 v
复制链接

扫一扫

专栏目录