Javascript：appendChild() 出现意外令牌非法错误答案

【问题标题】：Javascript: Unexpected Token ILLEGAL Error with appendChild()Javascript：appendChild() 出现意外令牌非法错误
【发布时间】：2011-09-17 19:15:21
【问题描述】：

我是 javascript 新手，但我收到了这行代码的“Unexpected Token ILLEGAL”错误：

switch (city) {
    case "london":
        var newdiv = document.createElement('<div id="london" class="option-area"><label class="city">From London to…?</label>
                <select class="city">
                    <option></option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select><br /></div>');

        document.all.bookingform.appendChild(newdiv);
        break;
}

这可能是一个非常愚蠢的错误，但我已经尝试了几个小时才能让这个块正常工作。请帮忙！

【问题讨论】：

developer.mozilla.org/en/document.createElement - 注意它使用了 document.createElement("div");

标签： javascript appendchild

【解决方案1】：

您的代码中有几个错误：

1) document.createElement() function 采用单个参数作为元素名称，而不是 HTML/XML sn-p 来解析和构建 DOM 树。但是，您应该通过构建一个匿名包装元素并设置其内部 HTML，然后将其第一个子元素附加到目标元素来实现您的目标，例如：

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

2) 字符串不能跨越多行，但您可以像这样构建多行字符串：

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

如果您确实需要字符串中的换行符，您可以在字符串文字中使用换行符转义序列 (\n)，例如 'Hello\nnewline!'。

[编辑]

当然，如果您只是想将 HTML 附加到文档正文中已有的元素，您可以这样做：

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

但是请注意，在修改上述表单时，各种浏览器中都有一些怪癖；考虑使用 jQuery、ExtJS 或 Prototype.js 等 JavaScript 库。

【讨论】：

能否以更直接的方式处理文档片段？

【解决方案2】：

document.createElement 用于创建一个元素 - 如document.createElement('div')，因此不允许传递 HTML。您可以创建元素，然后稍后使用 ref_to_the_div.innerHTML = "<some html="goes here" />" 更改其 HTML

【讨论】：