Question

我希望能够将元素注入容器 - 比如，将项目列表到列表 - 单独和在任何给定时间，但只能一次。

我知道我可以使用.append()，.wrap()和其他DOM插入技术注入特定位置。正如建议here。

但是，如果我不知道用户选择注入它们的顺序（如果有的话）该怎么办？当然，我可以创建一个完整的自制方法来授予正确的顺序......例如，我的实际的问题是，如果存在定义 native 的HTML属性或者语义顺序。类似于role属性为元素提供语义的方式。

我也知道我可以使用CSS构造display: table, table-footer-group, etc. - 但这限制了我只有三个“组”。我可能需要更多。

Answer 1

我是这样做的，用隐藏的占位符设置它。它工作正常，因为这些列表项目无论如何都需要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" />

自动订购注入的元素

1 个答案: