佔位符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在所有上下文（例如列表）中都是無效的;此外，它們可能會無意中造型（我希望我的佔位符不可見）。
• 瀏覽器不具有自定義type渲染<template>的內容，而我做想渲染我的佔位符裏面有什麼
• 同樣，<script>標籤不使它們的內容要麼

Answer 1

根據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>類型（文本，按鈕，收音機，複選框，範圍等）。這就是爲什麼你應該指定類型，所以瀏覽器理解你的代碼。

希望這會有所幫助！

Answer 2

不，在HTML中，沒有通用的包裝元素 - 這就是實際的內容。最接近的是ins和del元素，它們可以包裝內嵌和塊元素，並且具有透明的內容模型。但即使他們不允許作爲ul元素的子元素。

而不是嘗試使用包裝，例如，對於某些li元素以便爲其添加子元素，請在li元素的最後一個元素上設置id屬性，並在其之後插入兄弟元素。這在DOM方面更自然，因爲所有的li元素都是ul的子元素，而不是部分是子女，部分是孫子。