>

다음 코드가 있습니다 :

$('button').click(function() {
  $('#parent').append('<div>element</div>');
});

#parent {
   height: 200px;
   width: 100px;
   border: 1px solid #ccc;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"></div>
<button>
  Add
</button>

https://jsfiddle.net/8ybnycxv/1/

버튼을 클릭하면 #parent 에 div 요소를 추가하고 싶습니다 . 그러나 #parent 에 요소가없는 경우  그러나 #parent하단부터 요소가 추가됩니다. . 어떻게해야합니까?

편집 : 시연 사진 추가

  • 답변 # 1

    vertical-align:bottom 설정  작동합니다

    $('button').click(function() {
        $('#parent').append('<div>element</div>');
    });
    
    
    #parent {
        height: 200px;
        width: 100px;
        border: 1px solid #ccc;
        display: table-cell;
        vertical-align: bottom;
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div id="parent"></div>
    <button>
    Add
    </button>
    
    

  • 답변 # 2

    transform: rotate(180deg) 사용  

    피들

    .rotate{
     transform: rotate(180deg);
     }
    
    

  • 답변 # 3

    이것이 의미가 있습니까?

    $('button').click(function() {
    	$('#parent .container').append('<div>element</div>');
    });
    
    
    #parent {
      position: relative;
      height: 200px;
      width: 100px;
      border: 1px solid #ccc;  
    }
    #parent .container {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="parent"><div class="container"></div></div>
    <button>
    Add
    </button>
    
    

  • 답변 # 4

    Abhishek Pandey의 답변으로 제 질문이 해결되었습니다. 그러나 어떤 경우에는 display: table-cell  몇 가지 단점이 있기 때문에 예상대로 작동하지 않을 수 있습니다.

    오버플로에서는 작동하지 않습니다 (div로 감싸 야 함)

    display: table 가있는 부모로 싸야합니다.  너비를 100 %로 설정하려면 (그렇지 않으면 너비를 1000000px로 설정하는 것과 같은 일부 해킹을 수행해야 함)

    flexbox를 사용하여 내 질문을 해결하는 다른 방법을 찾았습니다

    <div id="parent"></div>
    <button>
    Add
    </button>
    #parent {
      height: 200px;
      width: 100px;
      overflow-y: auto;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column-reverse;
    }
    var i = 0;
    $('button').click(function() {
        $('#parent').prepend('<div>element' + (++i) + '</div>');
    });
    
    

    https://jsfiddle.net/j23otgx0/4/

    플렉스 방향이 column-reverse 이므로

    참고 jquery 함수를 prepend() 로 변경해야합니다.   append() 대신

  • 답변 # 5

    다른 사례가 있는데 해결책을 찾았습니다. 누군가에게 도움이 될 수 있습니다.

    div (컨테이너)가 있고 그 안에 드래그 가능한 항목을 여러 행으로 추가하고 다음을 사용합니다.

    transform: rotate(180deg)  드래그 가능한 기능을 수정했습니다 :

    컨테이너 또는 부모 :

    .parent{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-content: flex-start;
    }
    $('button').click(function() {
        $('.parent').append('<div>element</div>');
    });
    
    

관련 자료

  • 이전 c++ - 크기 조정시 벡터의 객체에 대한 참조가 손실됩니까?
  • 다음 ansible을 사용하여 경로 목록을 제공하도록 json 쿼리 출력 형식을 지정하십시오