Question

由于my other jquery question没有回应，我想在几行代码中填写，以便您可以帮助我理解。首先，这个测验在按钮按下时运行了多个问题，并且在我有限的理解中，这是直接的DOM操作，并且当一个人查看源＆＃34;时不显示。在浏览器中。听起来不错吗？

其次，我对这些问题感到困惑：

＆＃13;

 var input = '<input id="' + optionId + '" name="' + inputName +
                                            '" type="' + inputType + '" /> ';

                                var optionLabel = '<label for="' + optionId + '">' + answer.option + '</label>';
                            
                                var answerContent = $('<li></li>')
                                    .append(input)
                                    .append(optionLabel);
                                answerHTML.append(answerContent);

＆＃13;

将这样的代码附加到空

是否有意义

 <li></li>

元素？我误读了这是元素之后的追加吗？它似乎在另一个问题中列出的较旧的jquery版本下工作，而不是新版本（我猜测这是错误的来源，如另一个问题的图像所示，但我不确定）。

我刚试过：

var answerContent = '<li>' + input + optionLabel + '</li>';

并且它产生了相同的结果，仍然是图中所示的错误。

Answer 1

这是直接的DOM操作，并且当一个人执行＆＃34;查看源＆＃34;在浏览器中

是。不要使用＆＃34;查看源代码＆＃34;，在浏览器的开发者工具（F12）中查看DOM。

我是否误读了这是元素之后的追加？

是。 http://api.jquery.com/append/

话虽这么说，不要通过连接字符串来构建HTML。一旦您使用的字符串包含在HTML中具有含义的字符，例如<，>或&，这将会中断。至少在answer.option这里可能会发生这种情况。

jQuery允许将元素属性作为带有键和值的对象传递，这样可以安全使用，并且更少地输入' + '。对于像这样的简单案例，它已经足够了。

$('<li></li>')
    .append( $('<input>', {id: optionId, name: inputName, type: inputType}) )
    .append( $('<label>', {htmlFor: optionId, text: answer.option}) )
    .appendTo("#answerHTML");

这里的哲学是＆＃34;创造一些东西，然后对它做一些事情＆＃34;。请注意，因此，此代码甚至不需要任何辅助变量。只要目标元素可以使用选择器轻松纠察，即使answerHTML也不需要是变量。

对于更复杂的DOM构建案例，使用jQuery创建每一个小小的内容变得乏味。使用像handlebars这样的HTML模板库。

jQuery：为什么有人想要附加到一个封闭的列表元素？

1 个答案: