日期:2014-05-17  浏览次数:20683 次

关于在FF浏览器下, 使用innerHTML获取不到元素值的解决方案
    前段时间接手了一个公司前辈的遗产代码 , 但是不兼容FF , 遂花了两个晚上, 终于勉强将问题解决, 所以标记一下, 为自己留个回忆, 如果能帮到各位好朋友, 那就更好!


     问题现象


function getDivCode(){
    divObj1 = document.getElementById('innerHtml_test1');
    divObj2 = document.getElementById('innerHtml_test2');
    html = divObj1.innerHTML;
    divObj2.innerHTML = html;
}



<div id="innerHtml_test1">
		 <input type="text" value="" name="test_name1"/>  
   		 <input type="text" value="" name="test_name2"/>  
</div>

<div id="innerHtml_test2">
</div>
	
<input type="button" onclick="getDivCode();" value="clickme"/>  



在IE8以下版本中,当用户在innerHtml_test1 的文本框中输入, 单击 button innerHtml_test2 中会正常获取 innerHtml_test1 的数据的结果 , 而 ff 及 ie8以上版本,则innerHtml_test2 可以取得 innerHtml_test1 的html代码格式, 但却无法取到用户输入到文本框中的值;



   解决方案 ,使用属性设置 , setAttribute


function getDivCode(){

   test_name1 = document.getElementById('test_name1');
   test_name2 = document.getElementById('test_name2');

   test_name1.setAttribute("value",test_name1.value)
   test_name2.setAttribute("value",test_name2.value)
	
    divObj1 = document.getElementById('innerHtml_test1');
    divObj2 = document.getElementById('innerHtml_test2');
    html = divObj1.innerHTML;
    divObj2.innerHTML = html;
}



尽管用这个方法非常的笨, 要是有1000个参数 , 那一定是会累死人, 希望有高手可以给出一个更好的解决方案, 供大家学习