javascript getElementById 和 InnerHTML 仅针对 html 运行一次

Question

我正在尝试为我的 html 代码创建一个简单的标题间隔符，这样我就不必多次键入“ ”，因此代码看起来更美味。不过我已经创建了这个:

$(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>

所以它运行“开始”菜单并按照我想要的方式正确间隔它，但不运行图 block 、操作中心等。有没有办法解决这个问题？我错过了什么吗？我可能还很遥远，因为我仍在学习。预先感谢您!

Answer 1

您应该使用类而不是 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>