Trying to change HTML with Jquery

Question

I'm trying to change my HTML code by using JQuery. When I use this code it works:

$('.theclass').html('hello');

But what I really want to do is to include a statemente in my HTML. So I tried this but it does not work.

$('.theclass').html( 
    "<select name='myName' id='myId'>
        <option value=''>-</option>
        <option value='A'>A</option>
        <option value='B'>B</option>
    </select>"
);

Any help? Thanks

Does it work if you put all that on one line? You can't break strings across multiple lines in JavaScript like that. — Pointy, Jun 23 '14 at 13:11
It's a basic syntax error. You can't have strings that span multiple lines. — Wesley Murch, Jun 23 '14 at 13:13

score 4 · Answer 1 · answered Jun 23 '14 at 13:11

4

Try to concatenate the strings properly when your string input exceeds out to a newer line,

$('.typehidden .controls').html( 
    "<select name='myName' id='myId'>"
        + "<option value=''>-</option>"
        + "<option value='A'>A</option>"
        + "<option value='B'>B</option>"
    + "</select>"
);

answered Jun 23 '14 at 13:11

Rajaprabhu Aravindasamy

64,912
15
96
124

A little explanation on why this will work would be helpful to the OP – asprin Jun 23 '14 at 13:12
@asprin Sure.. give me 2 mins.. – Rajaprabhu Aravindasamy Jun 23 '14 at 13:13
1

No worries, I already +1'd it – asprin Jun 23 '14 at 13:13

score 2 · Answer 2 · answered Jun 23 '14 at 13:13

2

You can use \ to create multline string.

$('.theclass').html( 
    "<select name='myName' id='myId'>\
        <option value=''>-</option>\
        <option value='A'>A</option>\
        <option value='B'>B</option>\
    </select>"
);

answered Jun 23 '14 at 13:13

Satpal

129,808
12
152
166

Govind Singh · Answer 3 · 2014-06-23T13:19:07.233

1

multi line without + or \ operator doesn't work , use either Rajaprabhu answer or you can write in a single line.

$('.theclass').html(  "<select name='myName' id='myId'><option value=''>-</option><option value='A'>A</option><option value='B'>B</option></select>");

edited Jun 23 '14 at 13:19

answered Jun 23 '14 at 13:12

Govind Singh

14,768
13
67
100

Trying to change HTML with Jquery

3 Answers3