如果订单更改，元素不会出现答案

【问题标题】：Element does not appear if order changed如果订单更改，元素不会出现
【发布时间】：2014-12-24 21:51:05
【问题描述】：

我使用 HTML 显示了 3 个 li 元素，使用 JavaScript 代码显示了 3 个。如果我将我的 JavaScript div 标记更改为 last 它会显示两个 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>

【问题讨论】：

因为id 是唯一的，所以您不希望元素具有相同的id。

标签： javascript html

【解决方案1】：

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

查看代码，它是getElementById，而不是getElementsById。所以它总是返回一个元素。

【讨论】：

【解决方案2】：

试试这个查看你的代码：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;
}

【讨论】：

【解决方案3】：

您只需正确关闭您的 div 标签，或围绕您的主要 ul 定义创建另一个 div。如果您将初始 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>

【讨论】：

【解决方案4】：

用class代替id，class用于多个元素

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/

【讨论】：