如何在jquery中插入div html？

-4

我想問一下如何在div中插入div html（var fieldHTML）？以下是我的代碼。如何在jquery中插入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>

$(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

所有的建議是值得歡迎的。

謝謝。

來源

2017-04-17 Joelton Ding Ying Chor

請不要只是發佈一個鏈接到你的代碼，幷包裹在代碼語法通過提供避免「無碼無小提琴」的規則 –

第一個建議是正確地使用網站[MCVE] * **在問題本身***。花一些時間閱讀[問] – charlietfl

我不明白這個問題是關於什麼 - 你可以更清楚一點。 – macbem

以下是帶解決方案的更新fiddle。

我在你的代碼中看到的唯一問題是變量fieldHTML在JavaScript中。這個變量沒有把你的HTML作爲一個字符串。所以給出以下錯誤。

Uncaught SyntaxError: Invalid or unexpected token

只要將該HTML轉換爲字符串，一切都會正常工作。

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>';

來源

2017-04-17 14:33:17

Mayur Patel，感謝您的解決方案。 –

jQuery有兩種方法來對內容附加：

.append(content [, content ])

插入內容，由參數指定的，所述集合中匹配的元素中的每個元素的結束。（read more...）

，第二個：

.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'))

這人會元素，裏面放上<div class='field-wrapper-inner'>...</div>，結束標記之前。

來源

2017-04-17 14:39:40

$(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); 

    });

來源

2017-04-17 14:42:36

如何在jquery中插入div html？

回答

相關問題