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>的内容，而我做想要呈现我占位符中的内容
同样，带有自定义<script>的{{1}}代码也不会呈现其内容

Answer 1

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

而不是尝试使用包装器，例如对于某些li元素，为了让孩子接受它，请在最后一个id元素上设置li属性，然后在其后插入兄弟元素。这在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>类型（文本，按钮，广播，复选框，范围等）一样。这就是您应该指定类型的原因，因此浏览器会理解您的代码。

希望这有帮助！

占位符HTML元素？

2 个答案: