jQuery val（）は.html（）の値を更新しません。

Question

入力フィールドのデフォルト値を使用してHTMLページを生成しました。ここではHTMLとJavaScriptで：私は変数に割り当てられたdiv要素を取得しようとしています

$('#trigger').click(function() { 
 
      var content = $(this).parent().find('.content'); 
 
      content.find('#name').val("Young man"); 
 
      content.find('#age').val("25"); 
 

 
      alert(content.find('#name').val()); 
 
      alert(content.html()); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
     <a id="trigger" href="#">Know!</a> 
 
     <div class="content"> 
 
      <div> 
 
       <label>Name:</label> 
 
       <input type="text" id="name" value="dummy"> 
 
      </div> 
 
      <div> 
 
       <label>Age:</label> 
 
       <input type="text" id="age" value="dummy"> 
 
      </div> 
 
     </div> 
 
    </div>

、このハンドルを通じてnameとageの値を変更します。最初の警告方法は、変更されたことを確認します。しかし、なぜcontent.html()は元のhtmlを出力していますか？更新されたデータを出力するにはどうすればよいですか？

Answer 1

attr()を使用して新しい値を割り当てます。

$('#trigger').click(function() { 
 
      var content = $(this).parent().find('.content'); 
 
      content.find('#name').attr("value", "Young man"); 
 
      content.find('#age').attr("value", "25"); 
 

 
      console.log(content.find('#name').val()); 
 
      console.log(content.html()); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
     <a id="trigger" href="#">Know!</a> 
 
     <div class="content"> 
 
      <div> 
 
       <label>Name:</label> 
 
       <input type="text" id="name" value="dummy"> 
 
      </div> 
 
      <div> 
 
       <label>Age:</label> 
 
       <input type="text" id="age" value="dummy"> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

jQueryの.val()方法はvalue属性を更新することはありません。 .attr()メソッドで変更できます。

$('#trigger').click(function() { 
 
    var content = $(this).parent().find('.content'); 
 
    content.find('#name').attr("value", "Young man"); 
 
    content.find('#age').attr("value", "25"); 
 

 
    alert(content.find('#name').val()); 
 
    alert(content.html()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <a id="trigger" href="#">Know!</a> 
 
    <div class="content"> 
 
    <div> 
 
     <label>Name:</label> 
 
     <input type="text" id="name" value="dummy"> 
 
    </div> 
 
    <div> 
 
     <label>Age:</label> 
 
     <input type="text" id="age" value="dummy"> 
 
    </div> 
 
    </div> 
 
</div>