How to add one specific HTML block with jQuery

Question

I'm trying to add html block with jQuery, but whatever i tried i couldn't add it correctly. I want to copy and paste one specific html block when i click the "add" button (Addfield button). I don't want to clone, just add one field with one click . Again and again... Hope you can help me thanks in advance.

HTML :

<div class="entry-edit">
<div class="entry-edit-head">
    <h4 class="icon-head head-edit-form fieldset-legend"><?php echo Mage::helper('panel')->__('Kategoriler') ?></h4>
    <button id="Addfield" title="Field Ekle" type="button" class="smclass"   onclick="" style="float: right;"><span><span><span>Field Ekle</span></span></span></button>
</div>
<fieldset id="grop_fields">

    <table cellspacing="0" class="form-list">

    <tr>
    <td class="label"><label for="Type">Tip</label></td>
    <td class="value">
    <select id="Type" name="optional[1][type]" class=" select">
    <option value="0">Date</option>
    <option value="1">Text</option>
    <option value="2">Select</option>
    </select>
    </td>
    </tr>
    <tr>
    <td class="label"><label for="Class">Class</label></td>
    <td class="value">
        <input id="Class" name="optional[1][class]" value="" type="text" class=" input-text">            </td>
    </tr>
    </table>

    <button id="Add" title="Ekle" type="button" class="scalable save" onclick=""  style=""><span><span><span>Ekle</span></span></span></button>
    <br></br>

</fieldset>

enter image description here

If you dont want to clone, create an html string and append it. But why don't you want to clone? — Karl-André Gagnon, Aug 19 '14 at 14:13
This is what I want to know too. You could modify the element after cloning, to change the names of the inputs, etc, then append it right after the other element, just like your image... — , Aug 19 '14 at 14:22

score 1 · Answer 1 · answered Aug 19 '14 at 14:17

1

You can do it like this:

var html_code = '<span>put your full code here</span>';
var selector = 'body'; 
//change selector with where you want to append your html code into..
$(selector).append(html_code);

answered Aug 19 '14 at 14:17

Bla...

7,228
7
27
46

score 1 · Answer 2 · answered Aug 19 '14 at 14:21

One way to approach this would be to create your "template" area in a hidden DIV. Use jQuery to duplicate and repeat the template.

For example:

<div id="templateholder"></div>

<div id="template" style="display: none;">
    <div class="template">
        <label for="Type">Tip</label>
        <select id="Type" name="optional[1][type]" class=" select">
            <option value="0">Date</option>
            <option value="1">Text</option>
            <option value="2">Select</option>
        </select>
        <button id="Add" title="Ekle" type="button" class="scalable save" onclick=""  style=""><span><span><span>Ekle</span></span></span></button>
    </div>
</div>

function createTemplate() {
    var temp = $("#template div.template").clone();

    //from here you can do things like change name fields or values
    temp.find("#Type").attr("name", "Type2");

    //...attach events
    temp.find("#Add").click(function() {
        //some click action like make a new template
        createTemplate();
    });

    //then add the new code to the holding area
    $("#templateholder").append(temp);
}

If you wanted to create a new one when the page first loads

$(function() {
    createTemplate();
});

score 0 · Answer 3 · edited May 23 '17 at 12:05

Its would be nice to know what you have tried.... but if you do a quick search you would know about DOM method....

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

source: http://www.w3schools.com/js/js_htmldom_nodes.asp

there is another question in stackoverflow with similar question with decent answer

Inserting HTML into a div

How to add one specific HTML block with jQuery

3 Answers3

Linked