使用 jQuery 添加元素 [关闭]答案

【问题标题】：Adding elements with jQuery [closed]使用 jQuery 添加元素 [关闭]
【发布时间】：2012-07-03 22:21:48
【问题描述】：

使用 jQuery 将此元素及其子元素添加到 DOM 的最佳方法是什么？假设我需要附加的 div 有一个 id 包装器。

<div id="menu">
<a href="#" id="link1" data-speed="600" data-easing="easeOutBack">About</a>
<a href="#" id="link2" data-speed="600" data-easing="easeOutBack">Updates</a>
<a href="#" id="link3" data-speed="600" data-easing="easeOutBack">Producer</a>
<a href="#" id="link4" data-speed="1000" data-easing="easeInExpo">Performer</a>
<a href="#" id="link5" data-speed="600" data-easing="easeOutBack">Speaker</a>
<a href="#" id="link6" data-speed="1000" data-easing="easeInExpo">Endorser</a>
<a href="#" id="link7" data-speed="1000" data-easing="easeInExpo">Mentor</a>
<a href="#" id="link9" data-speed="600" data-easing="easeOutBack">Press</a>
<a href="#" id="link10" data-speed="600" data-easing="easeOutBack">Contact</a>
</div>

有人愿意帮忙吗？

谢谢，

米尔科

【问题讨论】：

欢迎来到 Stack Overflow。这是一个非常的基本问题。我们希望您在提出问题之前进行少量研究。您很可能会通过快速的 Google 搜索或查看jQuery documentation（提示，请参阅append()）很容易找到答案
What have you tried?
是的，我知道这是基本的，但我担心如何添加内部锚元素及其属性。

标签： jquery dom append jquery-append

【解决方案1】：

这样试试

$('#menu').append('#yourIdToInclude')

【讨论】：

这是否适用于尚未成为 DOM 一部分的元素？问题询问关于将 附加到 DOM，这意味着它不是。

【解决方案2】：

$('#menu').appendTo('#elementinwhichtoappend')

【讨论】：

致反对者：他想在 特定元素 内将一些数据注入 dom 的事实本身并不排除 apriori（进一步除外澄清）他已经将该标记注入到dom的其他地方。否则，逻辑上认为他应该以字符串形式呈现标记（存储在变量中）

【解决方案3】：

$('<div id="menu">...</div>').appendTo('#wrapper');

请确保第一部分的 HTML 没有换行符。

【讨论】：

【解决方案4】：

$('<div id="menu">
<a href="#" id="link1" data-speed="600" data-easing="easeOutBack">About</a>
<a href="#" id="link2" data-speed="600" data-easing="easeOutBack">Updates</a>
<a href="#" id="link3" data-speed="600" data-easing="easeOutBack">Producer</a>
<a href="#" id="link4" data-speed="1000" data-easing="easeInExpo">Performer</a>
<a href="#" id="link5" data-speed="600" data-easing="easeOutBack">Speaker</a>
<a href="#" id="link6" data-speed="1000" data-easing="easeInExpo">Endorser</a>
<a href="#" id="link7" data-speed="1000" data-easing="easeInExpo">Mentor</a>
<a href="#" id="link9" data-speed="600" data-easing="easeOutBack">Press</a>
<a href="#" id="link10" data-speed="600" data-easing="easeOutBack">Contact</a>
</div>').appendTo('#wrapper');

【讨论】：

谢谢，它有效。我只需要弄清楚#menu div 内不允许有间距。

【解决方案5】：

假设目标 div 的 id 为 target，并且您的 html 位于名为 html 的字符串中

$("#target").append(html)

【讨论】：

html 周围没有引号 - 您只需将实际字符串 html 附加到该元素，而不是变量 html 的内容。
@AnthonyGrist：哎呀！！修复。感谢您指出:)

【解决方案6】：

好吧，你可以使用 soem 方法做 append，但这取决于你想在哪里添加这些元素，看这个：

.append(): http://api.jquery.com/append/ 插入到元素的末尾

.prepend(): http://api.jquery.com/prepend/ 插入到元素的开头

希望对你有帮助

【讨论】：

您的描述不正确。 .append() 将添加到元素的末尾，而不是之后。同样，.prepend() 将添加到元素的开头，而不是之前。
是的，我正确，但我知道如何使用每个人。抱歉，我的母语不是英语！