CODEWITHSUNDEEP
javascriptjqueryhtml
Farukest
Farukest

Reputation: 1518

How to add one specific HTML block with jQuery

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

Upvotes: 0

Views: 4028

Answers (3)

jwatts1980
jwatts1980

Reputation: 7356

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

Upvotes: 1

Bla...
Bla...

Reputation: 7288

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

Upvotes: 1

lifejuggler
lifejuggler

Reputation: 460

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

Upvotes: 0

Related Questions