赶知识网

[IE,FF]动态获取节点代码innerHTML分析

Js/Css/jQuery 2010-07-14发布 7408次点击

FF中用innerHTML无法获得被JS改动过的input的value

后来编辑的!
你用js赋值以后,innerHTML 还是没变,但是实际的值已经变了!
js对元素的修改 不会影响到已经生成完毕的HTML!

兼容FF与IE(的)获取子节点(的)js代码,需要(的)朋友可以参考下,我们发布(的)dom操作文章。 代

码如下:
function getFirstChild(obj) {
var result = obj.firstChild;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}

function getNextChild(obj) {
var result = obj.nextSibling;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}


function   addinput(){
    document.getElementById( "spanid ").innerHTML= " <input   name= 'text1 '   type=

'text '   id= 'text1 '   value= ' '> ";  
}
====================
在一个form里用js添加一个输入框,提交后php取不到这个text1的值,为什么?怎么解决?

用document.createelement+element.appendchild

<script   type= "text/javascript ">
<!--
var   board   =   document.getElementById( "board ");
var   e   =   document.createElement( "input ");
e.type   =   "radio ";   //紧接着上一行写
var   obj   =   board.appendChild(e);
obj.checked   =   true;
//如下写法也是正确的:
//e.checked   =   true;
-->
</script>
============
找了一下资料,象上面那样添加一个input,但我要动态在后面追加多个input怎么呢?
用innerHTML是象下面那样追加的,用createElement怎么加?
document.getElementById( "spanid ").innerHTML+= " <input   name= 'text1 '   type=

'text '   id= 'text1 '   value= ' '> ";

<html>
<head>
</head>
<body>
<script   language= "javascript "   type= "text/javascript ">
function   $()
{
    getName( "form1 ")[0].innerHTML+= " <input   name=\ "subm\ "   type=\ "submit\ ">

";
}
function   getName(name)
{return   document.getElementsByName(name);}
</script>
<form   action= " "   method= "get "   name= "form1 ">
<input   name= "ass "   type= "text "   onClick= "$() ">
</form>
</body>
</html>
注意的是form要放在body标签里(IE7.0\Firefox2.0)通过!


直接appendChild对象就行了,他会依次往后追加

<script   type= "text/javascript ">
<!--
var   board   =   document.getElementById( "board ");
for(var   i=0;i <10;i++){
var   e   =   document.createElement( "input ");
e.type   =   "text "
e.setAttribute( "name ", "input_ "+i);//设置name属性
board.appendChild(e);//将e追加到board最后一个节点后面
}

</script>


var   board   =   document.getElementById( "board ");
var   inputid   =   document.getElementById( "input "+i);
board.removeChild(inputid   );
这样可以在ie里删除了,不知道ff可以不,晚上才能试


是用innerHTML来追加元素简单方便,但是如果该元素(例如div1)中有input元素,那么追加之

后框中用户输入的内容就丢失了(firefox),ie下还没看,估计应该差不多

方法就是动态创建一个subDiv,然后给subDiv.innerHTML为想追加的内容,然后

div1.appendChild(subDiv).


[IE,FF]动态获取节点代码innerHTML分析

 

代码
<div id="parentnode">   
    <span id="childnode">child</span>
</div>
<script type="text/javascript">
  var childNode = document.getElementById("childnode") , parentNode =

document.getElementById("parentnode");
</script>
 

 当为子节点添加默认属性时:


 childNode.className = "childClass"; 或: childNode.className = new String

("childClass");


 parentNode.innerHTML IE,FF都能获得 [ <span class="childClass"

id="childnode">child</span> ]


 


--------------------------------------------------------------------------------

 


 当为子节点添加私有属性时:

  childNode.type = "childType";


  parentNode.innerHTML 当且仅当 IE能获得 [ <span type="childType"

id="childnode">child</span> ]


  childNode.type = new String("childType"); //Object对象


  parentNode.innerHTML IE,FF都不能获得 [ <span id="childnode">child</span> ]


  


  childNode.setAttribute("type","childType");
  parentNode.innerHTML IE,FF都能获得 [ <span class="childClass"

id="childnode">child</span> ]


  childNode.setAttribute("type", new String("childType"));

  parentNode.innerHTML 当且仅当 FF能获得 [ <span class="childClass"

id="childnode">child</span> ]


 

  当对元素动态添加私有属性后获取innerHTML,如果采用.属性 方式赋值,无论哪种数据类型

FireFox都不能获得,如果当赋值的类型是个对象的话IE不能通过innerHTML获得。


  如果使用setAttribute方法赋值时,无论哪种数据类型FireFox都能获取,如果当赋值的类型是个

对象的话IE不能获取 。


  总结:在IE 环境下 赋值类型为对象时 innerHTML 获取不到其改变,在FireFox环境下 .属性 方式

获取不到其改变。

 

Top10

沪ICP备09053415号 © 赶知识网