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

<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环境下 .属性 方式获取不到其改变。

时间: 2024-10-03 20:50:02

JS 动态获取节点代码innerHTML分析 [IE,FF]_javascript技巧的相关文章

Js动态添加复选框Checkbox的实例方法_javascript技巧

首先,使用JS动态产生Checkbox可以采用如下类似的语句: 复制代码 代码如下: var checkBox=document.createElement("input");checkBox.setAttribute("type","checkbox");checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用document.

javascript动态获取登录时间和在线时长_javascript技巧

本文实例介绍了javascript动态获取登录时间和在线时长的相应代码,分享给大家供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <title>online</title> <script language=javaScript> ///这里是获得登录时候的时间,用来和动态的时间做差来求时长 var s = new Date(); function clockon() { var thistime = new Date

用JS动态设置CSS样式常见方法小结(推荐)_javascript技巧

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

JS动态修改iframe高度和宽度的方法_javascript技巧

本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

js动态创建及移除div的方法_javascript技巧

本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementByIdx_x("newD")!=null) document.body.removeChild(document.getElementByIdx_x("newD")); var Div = document.create_rElement("div");/

通过JS动态创建一个html DOM元素并显示_javascript技巧

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个

JS动态修改表格cellPadding和cellSpacing的方法_javascript技巧

本文实例讲述了JS动态修改表格cellPadding和cellSpacing的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过修改表格对象的cellPadding和cellSpacing属性来修改表格单元格的间距 <!DOCTYPE html> <html> <head> <script> function padding() { document.getElementById('myTable').cellPadding="15&quo

js实时获取并显示当前时间的方法_javascript技巧

本文实例讲述了js实时获取并显示当前时间的方法.分享给大家供大家参考.具体实现方法如下: js部分如下: <script type="text/javascript"> window.onload = function() { var show = document.getElementById("show"); setInterval(function() { var time = new Date(); // 程序计时的月从0开始取值后+1 var