占位符HTML元素

Question

有什么HTML元素可以用来包装其他元素用作占位符吗？例如，

<ul>
    <placeholder id="list-placeholder">
        <li>item 1</li>
        <li>item 2</li>
    </placeholder>
    <li>last item</li>
</ul>

然后我就可以通过JavaScript访问#list-placeholder，并将子级附加到它上面

• 我不认为我可以使用<div>，因为div不是在所有上下文中都有效（比如列表）；此外，它们可能会被不经意地设置样式（我希望我的占位符是不可见的）
• 浏览器不呈现<template>的内容，而我确实想要呈现占位符中的内容
• 同样，带有自定义type的<script>标签也不会呈现其内容

Answer 1

不，在HTML中，没有通用的包装器元素——这才是真正的意义所在。最接近的是ins和del元素，它们可以包装内联和块元素，并具有透明的内容模型。但是即使是它们也不被允许，例如作为ul元素的子元素。

不要试图使用包装器（例如，对于某些li元素）来将子元素附加到它，而是在最后一个有问题的li元素上设置id属性，并在其后面插入兄弟元素。这在DOM方面更自然，因为这样所有li元素都将是ul的子元素，而不是部分是子元素，部分是孙元素。

Answer 2

根据W3，只有<li>可以是<ul>的子级，因此，您的问题的答案是否定的。没有有效的方法来包装两个<li>，它们是<ul>的子级。

如果必须的话，可以使用<span>。我创建了一个示例，虽然无效，但它在所有现代浏览器中都能正确运行。

示例片段和下面的一些证明：

function showList(){
  
  document.getElementById('list-placeholder').style.display = "block";
  document.getElementById('showList').style.display = "none";
  }

<ul>
    <span id="list-placeholder" style="display:none;">
        <li>item 1</li>
        <li>item 2</li>
    </span>
    <li>last item</li>
</ul>
<input type="button" value="Show more list items!" onclick="showList()"/>

如果你不必使用包装器，你可以也应该使用以下VALID代码：

function showList(){
  
  var hidden = document.getElementsByClassName('hidden')
  
  for (i=0; i<hidden.length; i++){
    
    hidden[i].style.display = "list-item";
    
    }
  document.getElementById('showList').style.display = "none";
}

.hidden
{
  display:none;
  }

<ul>
    
        <li class="hidden">item 1</li>
        <li class="hidden">item 2</li>
    
    <li>last item</li>
</ul>
<input type="button" value="Show more list items!" id="showList" onclick="showList()"/>

使用类来选择隐藏项，而不是包装。这是你问题的正确语法。

此外，还有设置<script>类型，就像设置<input>类型一样（文本、按钮、单选框、复选框、范围等）。这就是为什么你应该指定类型，这样浏览器就能理解你的代码。

希望这能有所帮助！