使用Jquery如何基于JSON结果添加HTML元素

Question

这是我目前所拥有的，如果我的Json对象返回true，那么我将类error_back添加到#message，否则添加类success_back。这工作正常，但现在我想添加一个按钮，所以我尝试了这个：

无效代码

 $('#message').append((data.error === true) ? 
 '<input type='submit' name='submit' class='button' id='submit_btn' value='Go back' />' : '' ); 

正常工作：

 $('#message').removeClass().addClass((data.error === true) ? 'error_back' : 'success_back').text(data.msg);

添加按钮的正确方法是什么？

Answer 1

如果你看一下突出显示的代码，你会发现它看起来很奇怪。您使用单引号来包装字符串，但您也在字符串中使用单引号。

就个人而言，我尽量避免构建HTML字符串：

if (data.error) {
    $('<input />', {
        type: 'submit',
        name: 'submit',
        'class': 'button',  // `class` is a reserved keyword
        id: 'submit_btn',
        value: 'Go back'
    }).appendTo('#message');
}

Answer 2

您的代码中存在语法错误，您不应嵌套单引号。

$('#message').append( data.error ? '<input type="submit" name="submit" class="button" id="submit_btn" value="Go back" />' : '' ); 

Answer 3

由于引号，这是无效的..您正在使用单引号'来包装字符串并且还包含属性..因此它无法正确解释..为避免使用双引号“来修复它或需要逃避单引号..

$('#message').append(data.error  ? 
 "<input type='submit' name='submit' 
              class='button' id='submit_btn' value='Go back' />" : " " );

\或逃离行情

$('#message').append(data.error ? 
     '<input type=\'submit\' name=\'submit\' 
                  class=\'button\' id=\'submit_btn\' value=\'Go back\' />' : ' ' );