Question

我使用HTML显示3个li元素，使用JavaScript代码显示3个元素。如果我将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>

Answer 1

使用class而不是id，class用于多个元素

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/

Answer 2

这是因为DOM中不能有多个具有相同id的元素。如果这样做，您将始终只获得具有id的第一个元素。

请参阅代码，getElementById而非getElementsById。所以它总是返回一个元素。

Answer 3

试试这个＆lt; ------------ HTML Code ---------＆gt;看看你的代码：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>

＆lt; ------------脚本代码是-------＆gt;

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

Answer 4

您只需要正确关闭div标签，或者在主要ul定义周围创建另一个div。如果你将初始ul留在＆＃34; mydiv＆＃34; 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>

如果订单已更改，则不会显示元素

4 个答案: