javascript - 使用Jquery操作html内容后获取html

Question

在我的js函数中，我想更改div内某些元素的属性，然后我需要将该div的html内容传递给另一个函数。但是，我使用 html() 方法获得的 html 没有改变。修改后的html如何获取？代码如下所示:

function copyDiv() {
  //set the content of the textarea
  $('#text_field').val("test");
  
  //get the content of the textarea, the content is changed
  alert($('#text_field').val());
        
  //get the html content and set it to the new div
  //However, this html is not changed
  $('#newDiv').html( $('#myDiv').html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <label for="text_field">text: </label>
	
  <textarea class="form-control" id="text_field"></textarea>
</div>

<div id='newDiv'>
</div>

<button type="button" onclick="copyDiv();">test</button>

Answer 1

我修改了您的代码，以便在复制 HTML 后将文本区域的值复制到新的文本区域，因为该值不是 DOM 的一部分(并且不会自动出现)。

我还从文本区域中删除了 ID 属性，因为一页上不能有多个具有相同 ID 的元素，这是您的代码所产生的。

function copyDiv() {
  $formControl = $('#myDiv .form-control');

  //set the content of the textarea
  $formControl.val("test");
  
  //get the content of the textarea, the content is changed
  alert($formControl.val());
        
  //get the html content and set it to the new div
  $('#newDiv').html( $('#myDiv').html());
  $('#newDiv .form-control').val( $formControl.val() );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
  <label for="text_field">text: </label>
	
  <textarea class="form-control" name="text_field"></textarea>
</div>

<div id='newDiv'>
</div>

<button type="button" onclick="copyDiv();">test</button>