如何使用jQuery将元素插入DOM？
在某些情况下，您想在现有文档中插入一个或多个新DOM元素。jQuery提供了多种在不同位置插入元素的方法。
after(content)方法将内容插入每个匹配的元素之后，而before(content)方法将内容插入每个匹配的元素之前。
后内容
after(content)方法在每个匹配的元素之后插入内容。
示例
您可以尝试运行以下代码，以了解如何使用after()方法将元素插入DOM ：
<html>
<head>
<title>jQuery after(content) method</title>
<script src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function () {
$(this).after('<div class = "div"></div>' );
});
});
</script>
<style>
.div {
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>
内容前
before(content)方法在每个匹配的元素之前插入内容。
示例
您可以尝试运行以下代码，以了解如何使用before()方法将元素插入DOM ：
现场演示
<html>
<head>
<title>jQuery before(content) method</title>
<script src = "https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class = "div"></div>' );
});
});
</script>
<style>
.div {
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>
-
我有一个.docx文档，顶部有一些表格。它们包含需要替换的文本占位符，这很好。但是，这些表中的一个需要重复，并用不同的值填充。我能够深度复制表并将其添加到文档的末尾，但我不知道如何将其插入适当的位置。我尝试在模板表的索引处添加副本，但在LibreOffice中会出现“未知的图形格式”错误，即使删除了原件： 我不知道如何最好地处理这件事。
-
本文向大家介绍如何使用jQuery作为最后一个子元素插入元素？，包括了如何使用jQuery作为最后一个子元素插入元素？的使用技巧和注意事项，需要的朋友参考一下 要使用jQuery将元素作为最后一个子元素插入，请使用方法。append(content)方法将内容附加到每个匹配元素的内部。 示例 您可以尝试运行以下代码，以了解如何使用jQuery作为最后一个子元素插入元素：
-
本文向大家介绍jQuery实现元素的插入，包括了jQuery实现元素的插入的使用技巧和注意事项，需要的朋友参考一下 效果图： 图（1） 初始效果 图（2） 点击' 插入到此元素前面 '效果 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
问题内容： 使用以下语法时，不必为每种类型的属性和事件繁琐地搜索解决方法： 有没有一种方法可以将整个HTML元素声明为字符串？喜欢： 问题答案： 创建片段然后插入该片段可能会更好，而不是直接弄乱它： 好处： 您可以使用本机DOM方法进行插入，例如insertBefore，appendChild等。 您可以在插入实际的DOM节点之前对其进行访问；您可以访问片段的childNodes对象。 使用文档片
-
问题内容： 我有这样的事情： 而且我想使用jQuery编写元素，以使等效的HTML完全像这样： 另外，任何普通的Javascript也可以。 谢谢。 编辑 ：经过更多的研究，似乎我正在寻找一个iframe的contentDocument属性的IE等效。“ contentDocument”是FF支持的W3C标准，但IE不支持。（惊喜） 问题答案： 两者都可以，您只需要针对不同的目标即可：
-
我有一个页面，里面有许多隐藏的div。这些div使用CSS处理程序。 在每个隐藏的div中，都有一个jQuery支持的幻灯片，使用名为TN3的jQuery插件构建。 每个隐藏的div都链接到页面上可见的照片。单击照片显示相应的隐藏div并将其滑动到位。再次单击照片，或单击隐藏div中的关闭按钮，将其向后滑动并再次隐藏。这是使用一个简单的jQuery显示/隐藏切换脚本完成的。 我的问题是，当你点击一