Placeholder HTML element? - html

Question

Is there any HTML element that I can use to wrap other elements to use as a placeholder? For example,
<ul>
<placeholder id="list-placeholder">
<li>item 1</li>
<li>item 2</li>
</placeholder>
<li>last item</li>
</ul>
Then I'd be able to access #list-placeholder via JavaScript and append children to it.
I don't think I can use <div> because divs aren't valid in all contexts (such as a list); furthermore, they may be inadvertently styled (I want my placeholder to be invisible).
Browsers don't render the contents of <template> whereas I do want to render what's inside my placeholder
Likewise, <script> tags with a custom type don't render their contents either

Answer 1

No, in HTML, there is no general wrapper element—which is what this is really about. What comes closest is ins and del elements, which can wrap both inline and block elements and have transparent content model. But even they are not allowed e.g. as a child of a ul element.
Instead of trying to use a wrapper e.g. for some li elements in order to apped children to it, set an id attribute on the last of the li elements in question and insert siblings after it. This is more natural in terms of DOM, since then all the li elements will be children of ul, instead of being partly children, partly grandchildren.

Answer 2

According to W3, only a <li> can be a child of a <ul>, therefore, the answer to your question is no. There is not a valid way to wrap two <li>s that are children of a <ul>.
If you have to, you could use a <span>. I have created an example, while not valid, this runs correctly in all modern browsers.
Example snippet and some proof below:
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()"/>
If you don't HAVE TO use a wrapper, you can and should use the following VALID code:
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()"/>
Use a class to select hidden items instead of a wrapper. That's the correct syntax for your question.
Also, there are set <script> types, just like there are set <input> types (text, button, radio, checkbox, range, etc.). That is why you should specify the type, so the browser understands your code.
Hope this helps!