2014-10-29 52 views
-7

我使用JavaScript代碼顯示了帶有HTML和3的3 li元素。如果我將JavaScript div標記更改爲最後一個,則會顯示ul元素,否則它不會顯示HTML ul標記。你能告訴我爲什麼嗎?如果訂單已更改,則不會顯示元素

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>my javascript eg </title> 
    <script type="text/javascript" > 
     function process() 
     { 
     var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> "; 
     var divid=document.getElementById("mydiv"); 
     divid.innerHTML=sval; 
     } 
    </script> 
    </head> 

    <body onload="process()"> 
    Hi Dude !!! 
    <div id="mydiv"/> 
     <ul id="u2" onclick="fn1()"> 
     <li>orange</li> 
     <li>blue</li> 
     <li>yellow</li> 
     </ul> 

    <!-- If I place the same div element at last line it doesn't work. --> 
    </body> 
</html> 
+0

因爲'id'是唯一的,所以不需要具有相同'id'的元素。 – 2014-10-29 09:11:09

回答

0

這是因爲在DOM中不能有多個元素具有相同的id。如果你這樣做,你將永遠只會得到帶有id的第一個元素。請參閱代碼getElementById而不是getElementsById。所以它總是返回一個元素。

0

試試這個< ------------ HTML代碼--------->看到這樣的代碼:http://jsfiddle.net/fbwyyrcL/

<body onload="process()"> 
Hi Dude !!! 
<div id="mydiv"></div> 
<ul id="u2" onclick="fn1()"> 
<li>orange</li> 
<li>blue</li> 
<li>yellow</li> 
</ul> 
</body> 

< ----- -------腳本代碼是------->

function process() 
{ 
    var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> "; 
    var divid=document.getElementById("mydiv"); 
    divid.innerHTML=sval; 
} 
0

你只需要正確關閉你的div標籤,或者在你的主ul定義中創建另一個div。如果您將inital ul保留在「mydiv」div中,則在函數運行後將被覆蓋(刪除)。

下面的代碼已經在IE9爲我工作:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title>my javascript eg</title> 
    <script type="text/javascript" > 
     function prozess(){ 
      var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul>"; 
      var divid=document.getElementById("mydiv"); 
      divid.innerHTML=sval; 
     }; 
    </script> 
</head> 

<body onload = "prozess()"> 
    Hi Dude !!! 
    <div id="mydiv"> </div> 

    <ul id="u2" onclick="fn1()"> 
     <li>orange</li><li>blue</li><li>yellow</li> 
    </ul> 
</body> 
</html> 
1

使用類而不是ID,類用於多個元素

JS

function process() 
{ 
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> "; 
var divclass=document.getElementsByClassName("mydiv");  
for (var i = 0;i<divclass.length;i++){  
    var item = divclass[i];   
    item.innerHTML=sval; 
}  
} 

HTML

<body onload="process()"> 
Hi Dude !!! 
    <div class="mydiv"></div> 
<ul id="u2" onclick="fn1()"> 
<li>orange</li> 
<li>blue</li> 
<li>yellow</li> 
</ul> 
<div class="mydiv"></div> 
</body> 

演示:http://jsfiddle.net/5avtsqnz/6/

相關問題