div htmlをjqueryの中に挿入するには？

Question

jquery（var fieldHTML）の中にdiv htmlを挿入する方法を尋ねますか？以下は私のコードです。

HTML

<div class="field-wrapper"> 
<div class="field-wrapper-inner"> 
    <div class="left"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <div class="right"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <a href="javascript:void(0);" class="add_button" title="Add field">+</a> 
</div> 
</div> 

JS

$(document).ready(function(){ 
    var maxField = 3; //Input fields increment limitation 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field-wrapper'); //Input field wrapper 
    var fieldHTML = '<div class="field-wrapper"> 
<div class="field-wrapper-inner"> 
    <div class="left"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <div class="right"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <a href="javascript:void(0);" class="remove_button" title="Remove field">-</a> 
</div> 
</div>'; //New input field html 

こちらより： fiddle

すべての提案は大歓迎です。

ありがとうございました。

Answer 1

ここでは、解決済みのfiddleが更新されています。

私のコードで唯一の問題は、変数fieldHTMLがjavascriptで表示されていることです。この変数はHTMLを文字列として扱っていません。だから以下のエラーを与える。

Uncaught SyntaxError: Invalid or unexpected token

HTMLを文字列に変換するだけで、すべて正常に動作します。

.append(content [, content ]) 

挿入コンテンツ、パラメータで指定され、マッチした要素の集合内の各要素の終わりに：

var fieldHTML = '<div class="field-wrapper"><div class="field-wrapper-inner"><div class="left"><input type="text" name="field_name[]" value=""/></div> <div class="right"><input type="text" name="field_name[]" value=""/></div><a href="javascript:void(0);" class="remove_button" title="Remove field">-</a></div></div>'; 

Answer 2

jQueryのコンテンツを追加するための2つの方法を持っています。 （read more...）

2つ目：

.appendTo(target) 

対象の末尾にマッチした要素の集合内のすべての要素を挿入します。 （read more...）

最初のものは、それが要素の後にコンテンツ権利、すなわち、

$（ 'フィールド・ラッパーの内側'）を付加し、単純である（fieldHTML）を追加します。

これは<div class='field-wrapper-inner'>...</div>の直後にコードを追加します。

</div>の前にdiv内にコードを配置する場合は、このdivに要素を追加する必要がありますが、要素は文字列だけでなくjQueryオブジェクトである必要があります。それをjQueryオブジェクトを作成するには、ちょうどすなわち$()、var fieldHTML = $('my HTML code');でそれをラップし、別のjQueryの要素に付加：

fieldHTML.appendTo($('.field-wrapper-inner')) 

この1つは右の終了タグの前に、<div class='field-wrapper-inner'>...</div>内の要素を配置します。

Answer 3

$(document).ready(function(){ 
var fieldHTML = '<div class="field-wrapper"> 
<div class="field-wrapper-inner"> 
    <div class="left"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <div class="right"> 
     <input type="text" name="field_name[]" value=""/> 
    </div> 
    <a href="javascript:void(0);" class="remove_button" title="Remove field">-</a> 
</div> 
</div>' 
    $('.field-wrapper').append(fieldHTML); 

    });