占位符HTML元素？

是否有任何HTML元素可用于包装其他元素以用作占位符？例如，占位符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在所有上下文（例如列表）中都是无效的;此外，它们可能会无意中造型（我希望我的占位符不可见）。
浏览器不具有自定义type渲染<template>的内容，而我做想渲染我的占位符里面有什么
同样，<script>标签不使它们的内容要么

来源

2014-11-03 mpen

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

如果必须，您可以使用<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()"/>

如果您不必使用包装，您可以并且应该使用下面的有效代码：

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>类型（文本，按钮，收音机，复选框，范围等）。这就是为什么你应该指定类型，所以浏览器理解你的代码。

希望这会有所帮助！

来源

2014-11-03 01:31:14

事实上不正确。 'li'是html 5：http：//www.w3中'ul'唯一有效的孩子。org/TR/html-markup/ul.html，请注意“0或更多li”，它也不会通过W3c验证器进行验证，另请参阅：http://www.w3.org/TR/html-markup/li .html;允许的父母“ul，ol和菜单” – 2014-11-03 01:37:41

True ...我会用一个有效的例子来编辑我的答案 – 2014-11-03 01:42:51

不是真的，它是有效的，但是OP专门寻找“包装”我不相信给出现在的HTML规范，说明这个问题有解决方案， – 2014-11-03 02:05:29

不，在HTML中，没有通用的包装元素 - 这就是实际的内容。最接近的是ins和del元素，它们可以包装内嵌和块元素，并且具有透明的内容模型。但即使他们不允许作为ul元素的子元素。

而不是尝试使用包装，例如，对于某些li元素以便为其添加子元素，请在li元素的最后一个元素上设置id属性，并在其之后插入兄弟元素。这在DOM方面更自然，因为所有的li元素都是ul的子元素，而不是部分是子女，部分是孙子。

来源

2014-11-03 05:26:07

占位符将通过框架生成，这就是为什么我需要d通用解决方案。我不认为我可以可靠地识别结束标记之前的最后一个元素，特别是如果它是文本节点。无论如何，感谢您的信息。 – mpen 2014-11-03 06:44:49

占位符HTML元素？

回答

相关问题