Javascript: Unexpected Token Illegal Error With Appendchild()

I'm new to javascript, but I'm getting an 'Unexpected Token ILLEGAL' error with this line of code: switch (city) { case 'london': var newdiv = document.createElement('&

Solution 1:

There are a couple errors in your code:

1) The document.createElement() function takes a single argument as the element name, not an HTML/XML snippet to parse and build a DOM tree. However you chould achieve your goal by building an anonymous wrapper element and setting its inner HTML, then appending its first child to the target element, for example:

var wrapperDiv = document.createElement("div");
wrapperDiv.innerHTML = '<div id="london" class="option-area"><label...';
document.all.bookingform.appendChild(wrapperDiv.firstChild);

2) Strings cannot span multiple lines but you can build a multiline string like this:

var str = '<divid="london"class="option-area">' +
          '  <labelclass="city">From London to…?</label>' +
          '  <selectclass="city">' + // ...
          '</div>';

If you actually want newlines in the string you can use the newline escape sequence (\n) in a string literal, like 'Hello\nnewline!'.

[Edit]

Of course, if you're just trying to append HTML to an element already in the document body you do this:

var mydiv = document.getElementById('mydiv');
if (mydiv) {
  mydiv.innerHTML += '<div class="newdiv">' +
                     ' New child will be appended...' +
                     '</div>';
}

Note however that there are quirks in various browsers when modifying forms such as above; consider using a JavaScript library such as jQuery, ExtJS, or Prototype.js.

Solution 2:

document.createElement is used to create one element - like document.createElement('div'), so passing HTML is not allowed. You could create the element, then change the HTML for it later with ref_to_the_div.innerHTML = "<some html="goes here" />"