jquery - これを追加するとコードが機能しなくなるのはなぜですか? シンプルな JQuery

Question

$('#insert_image').click(function(){
    $('#image').attr("src", "img/julia1.jpg");
});

以下を追加すると、コードの最初のブロックが機能しなくなります。

$('#insert_paragraph').click(function(){
    var text = $('#paragraph').val();
    $('#paragraph').replaceWith('<p>'text'</p>');
});

コードの最初のブロックは 2 番目のブロックとは何の関係もないのに、なぜ動作しなくなるのでしょうか? また、テキストを作成しようとしている 2 番目のコード ブロックでは、段落を入力できます。その横にあるボタンをクリックすると、テキストエリアがページ上の段落に置き換えられます。

Answer 1

次の変更を行います。

$('#insert_paragraph').click(function(){
    var text = $('#paragraph').val(); //if input, use .val(), otherwise use .text() or .html()
    $('#paragraph').replaceWith('<p>' + text + '</p>');
});

---

編集：

を使用しているため、次をtextarea使用します.val()。

$('#insert_paragraph').click(function(){
    var text = $('#paragraph').val(); 
    $('#paragraph').replaceWith('<p>' + text + '</p>');
});

.val() メソッドは主に、input、select、textarea などのフォーム要素の値を取得するために使用されます。

デモ: http://jsfiddle.net/dirtyd77/d99wF/3/

Answer 2

ある'<p>' text '</p>'べきだから'<p>' + text + '</p>'

JavaScript での連結は+;を使用して行われます。

Answer 3

注意を払う：

ある文字列を別の文字列に追加することは、+char によって行われます。

代わりに次のコードを試してください。

$('#insert_paragraph').click(function(){
    var text = $('#paragraph').val();
    $('#paragraph').replaceWith('<p>'+text+'</p>');
});

Answer 4

syntax error in:

$('#paragraph').replaceWith('<p>'text'</p>');

try this

$('#paragraph').replaceWith('<p>' + text + '</p>');

Answer 5

Missing + sign in :

 $('#paragraph').replaceWith('<p>'+text+'</p>');