标签：text 百度 rem 元素 html5 web前端 显示 加载 name
先贴代码
1 <form action=""> 2 <p> 3 <label for="x">Number:</label> 4 <input id="x" name="x" type="number" /> 5 </p> 6 <input id="submit" type="submit" value="Calculat Square" /> 7 <script> 8 var x = document.getElementById(‘x‘); 9 var output = document.createElement(‘p‘); 10 output.textContent = ‘Type a number; it will be squared right then!‘; 11 12 x.form.appendChild(output); 13 x.form.onsubmit = function(){return false;}; 14 x.oninput = function(){ 15 var v = x.valueAsNumber; 16 output.textContent = v + ‘ squared is ‘ + v*v; 17 }; 18 19 var submit = document.getElementById(‘submit‘); 20 submit.parentNode.removeChild(submit); 21 </script> 22 </form>
这段代码是求平方，javascript起作用时通过JS计算直接显示在页面，页面禁止加载JS时通过submit提交（参考noscript）。这里只记录基础JS。
第9行，createElement()方法会创建一个元素节点，通常添加文本，故后面紧接着赋值output.textContent = ‘‘;然后插入显示x.form.appendChild(output);百度的时候看到另一种用法一起贴过来
1 var btn=document.createElement("BUTTON"); //创建元素节点 2 var t=document.createTextNode("CLICK ME"); //创建文本节点 3 btn.appendChild(t); //将文本节点添加到元素中
第15行，valueAsNumber是HTML5新增,可以读取元素内数值，但是要配合<input type="number" />使用，否则会报NAN错误。
标签：text 百度 rem 元素 html5 web前端 显示 加载 name
原文地址：http://www.cnblogs.com/hjjz/p/6680598.html
