问题描述

如下一段js可以如此用吗？

如下一段代码：

 <form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <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;
  };
 </script>
 <noscript>
  <input type=submit value="Calculate Square">
 </noscript>
</form>

这里，x.form.appendChild(output)，可以如此用吗？谁能解释一下？这是我我在W3C里看到的一段代码

解决方案

input对象的form属性为input所在form对象，ie8-不支持oninput和textContent属性。oninput同时添加onpropertychange，textContent改为innerHTML

解决方案二：

x是id为x的input,x.form 指向的就是x所在form，然后appendChild就是添加新的child元素

但是input的form属性在ie中不支持，form属性的详情：

 http://www.w3schools.com/tags/att_input_form.asp