javascript getElementById和InnerHTML僅針對html運行一次

Question

我正在嘗試為我的html代碼創建一個簡單的標題分隔符，這樣我就不必輸入很多“＆nbsp”，因此該代碼看起來也很麻煩。 但是我創建了這個：

$(function() {
    var subSpace = document.getElementById("subSpace");
    var titleName = document.getElementById("subSpace").value;
    subSpace.innerHTML = "          " + titleName;
    return false;
});

但它只針對此代碼運行一次：

<li><a href="#" id="subSpace" value="Start Menu"     ></a></li>
<li><a href="#" id="subSpace" value="Tiles"      ></a></li>
<li><a href="#" id="subSpace" value="Action Center" ></a></li>
<li><a href="#" id="subSpace" value="Settings"       ></a></li>
<li><a href="#" id="subSpace" value="Customizations"></a></li>
<li><a href="#" id="subSpace" value="Windows Search"></a></li>
<li><a href="#" id="subSpace" value="Microsoft Edge"></a></li>

因此它可以運行“開始”菜單，並按照我想要的方式正確地隔開它，但不能運行磁貼，動作中心等。是否可以解決此問題？ 我想念什么嗎？ 我仍在學習中，所以我可能會遙遙領先。 先感謝您！

Answer 1

那是因為您有ID為subSpace多個元素。 您只能使用一次ID。 如果您有多個具有相同ID的元素，則只會匹配第一個元素。

另外，在旁注中，您應該真正使用CSS來設置頁面樣式（即添加間隔符/邊距/填充）。

Answer 2

您應該使用類而不是ID，因為ID應該是唯一的。 除此之外，您可能正在使用CSS在左側添加填充：

 .subspace { padding-left:10px; } 

 <li><a href="#" class="subspace">Start Menu</a></li> <li><a href="#" class="subspace">Tiles</a></li> <li><a href="#" class="subspace">Action Center</a></li> <li><a href="#" class="subspace">Settings</a></li> <li><a href="#" class="subspace">Customizations</a></li> <li><a href="#" class="subspace">Windows Search</a></li> <li><a href="#" class="subspace">Microsoft Edge</a></li> 

Answer 3

您有重復的id 。 如果需要選擇多個元素，請使用class 。 您可以使用JQuery選擇它們

<a href="#" id="subSpace" value="Start Menu" class="subSpace">

在您的js中：

$('.subSpace').html('          ');

我在這里看到另一個答案，它提出了一種更好的方法，僅使用CSS即可做到這一點。 您也應該考慮這一點。