自动订购注入的元素
我希望能够在一个容器中注入元素 - 比如说，将项目列入列表中 - 在任何给定的时间单独注入，但只能注入一次。
我知道我可以使用.append() .wrap()和其他DOM插入技术注入特定位置。 如这里所建议的。
但如果我不知道用户选择注入它们的顺序（如果有的话）该怎么办？ 当然，我可以创建一个完整的自制方法来授予正确的顺序，而且......我的实际问题是，如果存在定义本机或语义顺序的HTML属性。 类似于role属性如何为元素提供语义。
我也知道我可以使用CSS构造display: table, table-footer-group, etc. ，但是这限制了我仅仅三个“组”。 我可能需要更多。
我这样做，用隐藏的占位符来设置它。 它工作正常，因为这些列表项目无论如何都需要有ID。 但我个人认为这不是最优雅的解决方案。
我已经添加了一些额外的噱头，以强调每个按钮应该有不同的表现。 还有更多的事情不只是插入这些列表项目。
function reset()
{
$('ul').html(
'<li class="hidden">reserved slot #0</li>'
+'<li class="hidden">reserved slot #1</li>'
+'<li class="hidden">reserved slot #2</li>'
+'<li class="hidden">reserved slot #3</li>'
);
$('body').css({
fontStyle: 'normal',
backgroundColor: ''
});
$('#text').text('');
}
$(document).ready(function(){
reset();
$('input').click(function(){
if (this.id == 'butt_reset') {
reset();
}
else {
var n = $(this).data('reference');
var $el = $('li').eq(n);
switch(n) {
case 0:
if (!document.querySelector('#li0')) {
$el.replaceWith('<li id="li0">Hansel and Gretel got lost in the forest,</li>');
$('body').css('background-color', 'blanchedalmond');
}
break;
case 1:
if (!document.querySelector('#li1')) {
$el.replaceWith('<li id="li1">It was so dark and so bitterly cold.</li>');
$('body').css('font-style', 'italic');
}
break;
case 2:
if (!document.querySelector('#li2')) {
$el.replaceWith('<li id="li2">They came to a fine little gingerbread house.</li>');
$('#text').append('lorem ipsum<br />');
}
break;
case 3:
if (!document.querySelector('#li3')) {
$el.replaceWith('<li id="li3">Who could be the lord of this little house?</li>');
$('body').css('background-color', 'indianred');
}
break;
}
}
});
});.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text"></div>
<ul></ul>
<input type="button" id="butt_inject0" data-reference="0" value="inject #0" />
<input type="button" id="butt_inject1" data-reference="1" value="inject #1" />
<input type="button" id="butt_inject2" data-reference="2" value="inject #2" />
<input type="button" id="butt_inject3" data-reference="3" value="inject #3" />
<input type="button" id="butt_reset" value="reset" />