動的要素から値を取得する方法

Question

「p」要素から値を取得する必要があります。この「p」をjQueryで描画しても問題ありません。次にボタンがあります。 「P」の要素から値を表示するが、私はすべての情報を得ることはありません、ここでは簡単なコードの例です：

$(document).ready(function() { 
 
    $('#c').click(function() { 
 
    var p = $('#p1').val(); 
 
    alert(p); 
 
    }); 
 

 
    draw(); 
 
}); 
 

 

 
function draw() { 
 
    var html = ""; 
 
    html += '<p id="p1">Hi</p>'; 
 

 
    $('#d').html(html); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="c">Click</button> 
 
<hr /> 
 
<div id="d"> 
 
</div>

どのように私はこの問題を解決することができますか？私はコンソールエラーを取得しません。

Answer 1

変更：

var p = $('#p1').val(); 

：

var p = $('#p1').text(); 

Answer 2

.val()のみinput、textareaとselect要素の値を返します。要素の内容を読みたい場合は、.text()または.html()を使用する必要があります。最初の要素はテキストだけを返し、2番目の要素は要素のHTMLコンテンツを返します。ここ

Answer 3

は.val（）メソッドは、主に、入力、選択してテキストエリアとしてフォーム要素 の値を取得するために使用されているjQueryの

からの引用です。空の コレクションで呼び出されると、undefinedが返されます。

@ehsanが示すように、内容をテキストとして取得する場合は.text()メソッドを使用してください。

Answer 4

.val()は、input,selectおよびtextareaの値を得るために使用されます。

あなたは要素（例えば：のdiv、P、など）内のテキストを取得したい場合は、.text()を使用する必要があります。

だから、あなたのケースでは、あなたがこの変更する必要があります。このため

var p = $('#p1').val(); 

：

var p = $('#p1').text(); 

注：あなたが要素内の完全なHTMLコードをしたい場合は、あなたが使用する必要がありますが.html()。

源：

• http://api.jquery.com/val/
• http://api.jquery.com/text/
• http://api.jquery.com/html/

Answer 5

また、var p = $('#p1').html();