摘要：通过DOM操作元素的学习，对DOM创建元素、修改元素属性、获取节点元素、往根节点元素追加子节点元素等有了了解和练习。通过对该模块的学习，设计了简单的获取用户提交数据的功能。通过学习，制作了简单的获取提交数据的页面，功能如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8&q
通过DOM操作元素的学习，对DOM创建元素、修改元素属性、获取节点元素、往根节点元素追加子节点元素等有了了解和练习。通过对该模块的学习，设计了简单的获取用户提交数据的功能。
通过学习，制作了简单的获取提交数据的页面，功能如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取用户提交数据</title>
</head>
<body>
<input type="text" id="txtInput" placeholder="请输入需要提交的数据">
<button>提交</button>
</body>
<script type="text/javascript">
let input=document.getElementById("txtInput");//获取input
let btn=document.getElementsByTagName("button")[0];//获取button
let body=document.children[0].children.item(1);//获取body
//创建div，用于存放换行符
let div=document.createElement("div");
div.innerHTML="<br><br>";
body.appendChild(div);
//创建textarea,用于存放接收到的数据
let textarea=document.createElement("textarea");//创建多行文本框，用于存放提交的值
textarea.setAttribute("style","width:170px;height:200px;");//设置样式
//textarea.setAttribute("id","txtContent");
body.appendChild(textarea);//添加到body中
//console.log(btn);
btn.onclick=function(){
//alert("aaa");
if(input.value==""){
alert("提交数据不能为空");
return;
}
let content=document.getElementsByTagName("textarea")[0];
content.value+=input.value+"\r\n";
input.value="";
}
</script>
</html>
批改老师：灭绝师太批改时间：2018-11-08 16:39:22
老师总结：完成的不错，除了上课的案例，还要试着把学习到的东西运用到其他地方去奥
