jQuery 创建包含子元素的元素

Posted 2023-02-22

【中文标题】jQuery 创建包含子元素的元素

【英文标题】：jQuery create element containing child element

【发布时间】：2014-12-05 18:03:49

【问题描述】：

Creating a div element in jQuery 在描述如何创建和插入元素方面做得很好，但是，我希望创建一个带有子元素的元素，例如<li><a href="abc.html">click</a></li>。 href 和 text 容易受到 XSS 的影响，所以我需要采取措施。我可以创建 <a> 元素，例如：

var href='abc.html',text='click';
jQuery('<a/>', 
    href: href,
    text: text
).appendTo('#mySelector');

如何修改它以包含 </li> 元素？

【参考方案1】：

个人而言，我喜欢直接在 html 中进行：

var html = "";
html += "<li>";
html += "<a href='www.google.com' >click me</a>";
html += "</li>";

$("myselector").append(html);

【讨论】：

正如我所指出的，文本 ckick me 是用户提供的。这可能会导致 XSS。

【参考方案2】：

总结一下：

$(document).ready(function() 
  var href='abc.html',text='click';

jQuery('<a/>', 
    href: href,
    text: text
).wrap("<li>").parent().appendTo('#mySelector');


)

http://codepen.io/anon/pen/Eyqco

【参考方案3】：

首先，您可以将<li> 标记附加到ID 为mySelector 的元素。

$('<li>').appendTo('#mySelector');

然后将 <a> 标签附加到 li 元素。

【讨论】：

谢谢利亚姆威尔逊。认为可能有更直接的方法。

@user1032531 有。检查我的答案;）

或者，您可以将 li 元素包裹在 标记周围。