javascript基础-《web前端最佳实践》

先贴代码

    <form action="">
        <p>
            <label for="x">Number:</label>
            <input id="x" name="x" type="number" />
        </p>
        <input id="submit" type="submit" value="Calculat Square" />
        <script>
        var x = document.getElementById('x');
        var output = document.createElement('p');
        output.textContent = 'Type a number; it will be squared right then!';

        x.form.appendChild(output);
        x.form.onsubmit = function(){return false;};
        x.oninput = function(){
            var v = x.valueAsNumber;
            output.textContent = v + ' squared is ' + v*v;
        };

        var submit = document.getElementById('submit');
        submit.parentNode.removeChild(submit);
        </script>
    </form>

这段代码是求平方，javascript起作用时通过JS计算直接显示在页面，页面禁止加载JS时通过submit提交（参考noscript）。这里只记录基础JS。

 

第9行，createElement()方法会创建一个元素节点，通常添加文本，故后面紧接着赋值output.textContent = '';然后插入显示x.form.appendChild(output);百度的时候看到另一种用法一起贴过来

var btn=document.createElement("BUTTON");    //创建元素节点
var t=document.createTextNode("CLICK ME");    //创建文本节点
btn.appendChild(t);    //将文本节点添加到元素中

第15行，valueAsNumber是HTML5新增,可以读取元素内数值，但是要配合<input type="number" />使用，否则会报NAN错误。