Question

我尝试在点击按钮后将h1元素（已经在HTML中）添加到div中。它应该很容易，但对于我的生活，我无法弄清楚为什么这不起作用。

＆＃13;

$('button').on('click', function() {
  $('div').append($('h1'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button"></button>
<h1>lorem ipsum</h1>
<div></div>

＆＃13;

我知道我可以直接向DOM添加一个新的h1，但是我试图在HTML中附加已存在的那个，因为它在实际项目中非常动态。

任何想法为什么它不起作用？

Answer 1

你应该尝试克隆它

$('div').append( $('h1:first').clone() );

Answer 2

  $('button').on('click', function(){
    
    //get h1 content with parent container
    var htmlCont = $('h1').wrap('<p/>').parent().html();
    $('h1').parent().remove();
    
    /*
    //get h1 content and append it
    var htmlCont = $('h1').html();
    $('h1').remove();
    */
    
    $('div').append(htmlCont);
    
  });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <button type="button">tes</button>
   <h1>lorem ipsum</h1>
   <div></div>

无法将已存在的h1附加到另一个div

2 个答案: