createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念

浅谈javascript中createElement事件,javascriptelement

createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念

复制代码 代码如下:

 <script>
   window.onload = function () {
   var input  = document.createElement(‘input’);
   var button = document.createElement(‘input’);
   input.type =’text’; 
   input.id= ‘text’;
   input.value =’1′;
   button.type=’button’;
   button.value =’逐加’;
   button.style.width = ’40px’;
   button.style.height = ’23px’;
   document.body.appendChild(input);
   document.body.appendChild(button);
   button.onclick = function(){
      var value = input.value;
      input.value = value * 1 + 1;
   }
  }
 </script>

 注:value其实是一个字符,如果将input.value=value*1+1;换成input.value=value+1;则结果会出现111111,他是不断以字符形式加1的,所以这时候value*1的就能将value值转换成Int型了。

总结:

要最终解决 createElement 方法的兼容性问题,还是要注意判断浏览器,针对 IE
可以使用其特有的通过为createElement 传入一段合法的 HTML
代码字符串作为参数的方法,非 IE 浏览器仍然使用 W3C 规范的标准方法。

createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念
复制代码 代码如下: scr…

Js基础

本文章来给大家介绍js中document.createElement用法与一些不同浏览器兼容性的介绍,有需要了解的朋友不防参考。

复制代码 代码如下:

1:document.write()

W3C DOM Level2 Core规定,Document 接口下的 createElement
方法可以创建一个元素节点对象实例。它可以传入一个字符串参数 tagName,在
HTML 中,这个参数可以是任何形式,但tagName 应为一个合法的标签名。

 <script>
   window.onload = function () {
   var input  = document.createElement(‘input’);
   var button = document.createElement(‘input’);
   input.type =’text’; 
   input.id= ‘text’;
   input.value =’1′;
   button.type=’button’;
   button.value =’逐加’;
   button.style.width = ’40px’;
   button.style.height = ’23px’;
   document.body.appendChild(input);
   document.body.appendChild(button);
   button.onclick = function(){
      var value = input.value;
      input.value = value * 1 + 1;
   }
  }
 </script>

这个是动态创建元素内容,利用js。这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别就在于writeln()输出内容后,会在源代码中换一行,而write()会紧挨着输出不会有任何换行。这个标签必须随页面一同加载显示。

例如:document.createElement(“td”);//创建一个td

 注:value其实是一个字符,如果将input.value=value*1+1;换成input.value=value+1;则结果会出现111111,他是不断以字符形式加1的,所以这时候value*1的就能将value值转换成Int型了。

在一个网页中引用其它网页可以使用js的document.write(html代码),这样子生成。

     若 tagName 中出现不合法的字符,则应抛出 INVALID_CHARACTER_ERR
异常。

总结:

2:最基本的dom遍历属性

    
由于微软的强大,其产品IE使用了一些规范以外的规则,其中之一就与createElement方法有关。即:在
IE 中,createElement
方法不仅可以通过合法的标签名创建节点对象,还可以通过传入一段合法的 HTML
代码字符串作为参数创建节点对象。

要最终解决 createElement 方法的兼容性问题,还是要注意判断浏览器,针对 IE
可以使用其特有的通过为createElement 传入一段合法的 HTML
代码字符串作为参数的方法,非 IE 浏览器仍然使用 W3C 规范的标准方法。

àdocument.getElementById()

     例如:document.createElement(“<input type=’text’
name=’txtName’>”);//创建一个name属性为”txtName”的input

您可能感兴趣的文章:

  • javascript
    createElement()创建input不能设置name属性的解决方法
  • Javascript
    createElement和innerHTML增加页面元素的性能对比
  • 动态添加option及createElement使用示例
  • 动态的创建一个元素createElement及删除一个元素
  • js
    用CreateElement动态创建标签示例
  • 使用jQuery解决IE与FireFox下createElement方法的差异
  • document.createElement()用法
  • createElement和onclick
  • 动态加载js文件
    document.createElement
  • javascript中createElement的两种创建方式

根据元素id获取元素,使用这个,不是集合,是单个的元素。

     若使用了 IE 特有的通过为 createElement 传入一段合法的 HTML
代码字符串作为参数创建节点对象的方法,则在其他浏览器中将会抛出异常,并导致后续代码无法执行。这就造成了浏览器的兼容性问题。

àdocument.getElementsByName()

也许有的读者会说,用 createElement
方法时,使用传入标签名的做法不就解决了兼容性问题吗?

但是这个特殊,根据元素的name获取元素,这个放回的是对象数组,和下面获取到的是集合只有上面的获取到的是单个的元素。在表单元素的时候使用最好。

例如:

à
document.getElementsByTagName()

 代码如下

这个也是获取元素,根据页面上标签的名字获取所有的元素,获取到的是个集合。

复制代码

Eg:按钮实现里面内容变化

var txt = document.createElement(“input”);

  1. <script type=”text/javascript”>

  2.     window.onload = function() {

  3.         var inputs =
    document.getElementsByTagName(‘input’);

  4.         for (var i = 0; i < inputs.length; i++)
    {

  5.             inputs[i].onclick =
    function () {

  6.                 for (var c = 0; c < inputs.length; c++)
    {

  7.                     if(inputs[c].type==”button”) {

  8.                         inputs[c].value = ‘哈哈哈’;

  9.                     }

  10.                 }

  11.                 this.value
    = ‘呜呜’;

  12.             };

  13.         }

  14.     };

  15. </script>

            txt.type = “text”;

Eg:利用计时器实现使用说明的等待时间。

            txt.name = “txtName”;
 ……

  1. <script type=”text/javascript”>

  2.     window.onload = function () {

但在 IE6 , IE7 中,如果动态生成 input 元素,是无法为其设置 name
属性的,这是IE自身的问题。这个时候,IE 特有的通过为 createElement
传入一段合法的 HTML
代码字符串作为参数创建节点对象的方法,就有了大显身手的机会。不过,IE
中无法为 input 设置 name 属性的 bug 已经在 IE8
中被修复。在其他浏览器中,不存在上述问题。

  1.         var ss = 4;

  2.         //这里启动计时器

  3.            var
    time=setInterval(function() {

  4.                var sa =
    document.getElementById(‘btn1’);

  5.                if (ss > 0) {

  6.                    sa.value = ‘请稍等几分钟’ + ss + ”;

  7.                    ss–;

  8.                } else {

  9.                    sa.value = ‘同意’;

  10.                    sa.disabled = false;

  11.                    clearInterval(time);

     所以,要最终解决 createElement
方法的兼容性问题,还是要注意判断浏览器,针对 IE
可以使用其特有的通过为createElement 传入一段合法的 HTML
代码字符串作为参数的方法,非 IE 浏览器仍然使用 W3C 规范的标准方法。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注