Insert HTML with Javascript

Question

UPDATE

I am trying to add a group which include textboxes and simple text in html using the onClick function

This is the html part of the button

    <div id="dynamicForm">
        <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
    </div>

and the js

    <script>
function generateRow()
{
    document.getElementById('dynamicForm').innerHTML +='
                    <input name="dneven" type="text" width="30"/>
                        дневен
                    <select name="zapl">
                        <option selected="selected" value="3">-----</option> 
                        <option 1>платен</option>
                        <option 2>неплатен</option>
                    </select>
                        отпуск от  
                    <select name="god">
                        <option selected="selected" value="11">---</option>
    <option 1>2011</option>
    <option 2>2012</option>
                    </select>г.
                ';
}
</script>

But it doesn't do anything. Where is my mistake and also how can I make the button to dissapear after it is pressed once? I'll appreciate all your help thanks in advance.

Answer 1

You have a syntax error here because you your quotes.

innerHTML+="<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>";

Here is a syntactically correct version. Note the string is in single quotes, which means the double quoted HTML attributes won't accidentally terminate the string.

innerHTML+='<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';

If you are still stuck, you may need to give us a little more code - have you used innerHTML as a short-hand to the actual innerHTML of an element or is it a variable declared somewhere?

Update

I haven't declared innerHTML anywhere

If you want to add your string of HTML to an element, you'll need to use:

document.getElementById('myElementId').innerHTML += 'html string';

As just putting

innerHTML += 'html string';

Creates an implicit global variable (and errors because you are trying to append to something that doesn't yet exist).

Update

I want to insert the HTML right after the button

HTML:

<div id="dynamicForm">
    <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
</div>

JS:

function generateRow() {
    document.getElementById('dynamicForm').innerHTML += '<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';
}

Later on, you might want to get into creating elements and appending them to the DOM without using strings and adding the event handlers in script rather than HTML - but this should get you started.

Update

You can't have line-breaks in your string in JavaScript, so you need either one line, or lots of appends. Working example here.

Answer 2

User jnerator.

1. Create jtag:

   var jtag = $j.tagArray([
       $j.inputText({ name: 'dneven', width: 30 }),
       'дневен',
       $j.select([
           $j.option({ selected: 'selected', value: '3', child: '------' }),
           $j.option({ value: '1', child: 'платен' }),
           $j.option({ value: '2', child: 'неплатен' })
       ]),
       'отпуск от ',
       $j.select({
           name: 'god',
           child: [
               $j.option({ selected: 'selected', value: '11', child: '------' }),
               $j.option({ value: '1', child: '2011' }),
               $j.option({ value: '2', child: '2012' })
           ]
       })
   ]);
   

2. Get html code

   var htmlCode = jtag.html();
   // jtag.html() returns:
   // <input name="dneven" width="30" type="text" ></input>дневен<select><option selected="selected" value="3" >------</option><option value="1" >платен</option><option value="2" >неплатен</option></select>отпуск от <select name="god" ><option selected="selected" value="11" >------</option><option value="1" >2011</option><option value="2" >2012</option></select>
   

3. Insert HTML Code into existing tag

   document.getElementById('dynamicForm').innerHTML += htmlCode;