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

Question

由于 my other jquery question 没有回复，我想将几​​行代码归零，以便您可以帮助我理解。首先，这个测验在按下按钮时运行多个问题，在我有限的理解中，这是直接的 DOM 操作，并且当人们在浏览器中“查看源代码”时不会显示。听起来对吗？

其次，我对以下几行感到困惑:

 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);

将这样的代码附加到空内容是否有意义

 <li></li> 

元素？我是否误读这是元素后面的附加内容？它似乎确实可以在另一个问题中列出的旧 jquery 版本下工作，但不能在新版本下工作(我猜测这是错误的根源，如另一个问题的图像所示，但我不确定)。

我刚刚尝试过:

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

它产生了相同的结果，仍然是一个错误，如图所示。

Answer 1

this is direct DOM manipulation and does not show up when one does "view source" in the browser

是的。不要使用“查看源代码”，在浏览器的开发者工具(F12)中查看 DOM。

Am I misreading that this is an append after the element?

是的。 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");

这里的哲学是“创造一些东西，然后对其做一些事情”。请注意，正因为如此，此代码甚至不需要任何辅助变量。甚至没有answerHTML需要是一个变量，只要目标元素可以通过选择器轻松选取即可。

对于更复杂的 DOM 构建情况，使用 jQuery 创建每一点都会变得乏味。使用 HTML 模板库，如 handlebars .