如何插入元素作为第一个子元素?

2024-06-19

我想在每次单击按钮时使用 jquery 添加一个 div 作为第一个元素

<div id='parent-div'>
    <!--insert element as a first child here ...-->

    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>

</div> 

Try the $.prepend() http://api.jquery.com/prepend/功能。

Usage

$("#parent-div").prepend("<div class='child-div'>some text</div>");

Demo

var i = 0;
$(document).ready(function () {
    $('.add').on('click', function (event) {
        var html = "<div class='child-div'>some text " + i++ + "</div>";
        $("#parent-div").prepend(html);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent-div">
    <div>Hello World</div>
</div>
<input type="button" value="add" class="add" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何插入元素作为第一个子元素? 的相关文章

  • 回发在 Firefox 中对 asp.net(C#) 页面不起作用

    我的 mozilla 火狐浏览器有问题 我正在使用 ASP NET 语言开发一个网站 并且在表单中有一个按钮 当我单击 onclick 属性上的按钮时 我正在调用一个函数 并且该函数执行回发 此场景适用于 Chrome 和 Internet
  • HTMLInputElement 没有方法“val”

    我正在循环遍历表行中的单元格 每个单元格中都有一个文本框 我想获取文本框的值并将其推送到数组中 function dothing var tds selected td var submitvals new Array tds each f
  • 包含空字符串的 Html 属性不显示 = 运算符

    jQuery 中的一个用例是 select append
  • 取消选择单选选项

    我正在使用引导单选按钮 http getbootstrap com javascript buttons并希望允许取消选择无线电组 这可以使用额外的按钮来完成 Fiddle http jsfiddle net norlihazmeyGhaz
  • Google Maps API - 按关键字(城市名称)定位/中心

    在我的网络应用程序中 我使用 gmap javascript API https developers google com maps documentation javascript https developers google com
  • 屏蔽社会安全号码输入

    对于我正在构建的网络应用程序来说 隐私非常重要 用户输入数据的格式也非常重要 为了帮助解决这个问题 我插入了一个 jquery 库 它将帮助屏蔽字段http igorescobar github io jQuery Mask Plugin
  • 将跨度值存储到 JavaScript 变量中

    我正在尝试编写 javascript 它将遍历一个跨度 获取其值 并将其存储在可用于执行算术的变量中 span class ServerData 30 span span class ServerData 6 span 关于以上两行 我的功
  • 使用 Javascript/JQuery 进行 XML/XSL 转换

    谁能告诉我是否有一种方法可以在客户端使用 Javascript 或 JQuery 进行 XML XSLT 转换 这种方法适用于所有主要浏览器 Chrome Safari Firefox 和 IE 谢谢 我应该从一开始就声明我编写了这个脚本
  • 在 JQGrid 中创建链接

    我需要在 JQgrid 中创建一个列的所有单元格 一个链接 该链接使用单元格值调用 javascript 函数 以传递给服务器端的某些查询 我见过jqGrid 中的 html 链接列 https stackoverflow com ques
  • 识别出现在指定位置的所有元素

    jQuery 中是否有任何方法可以选择位于特定位置的所有元素 例如选择位于 left 100 和 top 300 的元素 另一个 div 位于同一位置 单击时我想获取两个 Div 的 ID 如果我可以选择位于一系列位置的元素 那就太好了 h
  • 使关闭图像出现在 DIV 的右上角

    我想知道如何使一个小十字 闭合 图像出现在 div 的右上角 使用 CSS 和 XHTML 谢谢 你可以这样做 jsfiddle net 7JEAZ 1317 http jsfiddle net 7JEAZ 1317 代码片段 panel
  • 单击 div 时更改复选框状态(真/假)

    我有一个带有图像 标签和输入复选框的 div 当我点击 div 时 我喜欢什么 它会将复选框状态从 true 更改为 false 并且反之亦然 jQuery markerDiv click function if this find inp
  • 阻止跨域调用 asp.net .asmx Web 服务

    我构建了一个应用程序 它使用 jQuery 和 JSON 来使用 ASP NET asmx Web 服务来执行增删改查操作 应用程序和 asmx 位于同一域中 我不介意人们远程消耗 asmx 的读取操作 但不希望人们随机删除内容 我可以将我
  • 跟踪已输出哪些 JSON 对象

    我通过将索引设置为 a 来随机输出 20 个左右的 JSON 对象randomNumber 最初是在页面加载时 我正在单独刷新已按 timeInterval 输出的每个 JSON 对象 为了跟踪已输出的 JSON 项目 我将每个项目的索引存
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • jquery metisMenu 无法在 ng-include 内工作

    我想用ng 包含渲染侧边栏template http startbootstrap com templates sb admin 2 模板要求jQuery metisMenu 插件对于下拉菜单 Issue 仅插件works当我加载以下脚本时
  • 在jquery中使用html2canvas将html元素导出到Png文件时如何设置自定义文件名?

    我的应用程序中有一个按钮 可将 html div 导出到 png 文件 我在 jquery 中使用 html2canvas 库做到了 这里的问题是当文件被下载时 它会以默认名称 下载 下载 我需要使用自定义名称下载 我在下面提供了代码 任何
  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch
  • 在 contenteditable div 中的插入符处插入 html

    我有一个带有 contenteditable 设置的 div 并且我正在使用 jquery 捕获按键 以在按下 Enter 键时调用 PreventDefault 如同这个问题 https stackoverflow com questio
  • 检测 html 元素内的用户选择

    如何检测用户选择 用鼠标突出显示 是否在某个元素内 某个元素的子元素 Example div sdfsdf div some span content span div sdfsd div 伪代码 if window getSelectio

随机推荐

  • 在 ASP.NET 中动态设置主题

    我有一个连接到不同域的应用程序 我没有复制和修改每个应用程序 而是在硬盘驱动器上使用相同的物理位置 但在 IIS 上使用单独的应用程序池和网站 基本上我想根据主机名更改主题 IE 用户访问 websome com 获取 websome 主题
  • 在 ruby​​ 中创建登录会话时理解“current_user”概念

    我正在阅读很棒的 Michael Hartl 教程来构建 ruby 应用程序here http ruby railstutorial org chapters sign in sign out sec 3acurrent user 我试图理
  • 将具有子目录的域转发到具有子目录的其他域

    我有一个热爱域名的客户 更喜欢转发域名 其中许多域没有与其关联的网站 它们仅用于营销和转发 我知道如何轻松地将一个域转发到另一个域 但我好奇的是如何将这些域的特定 url 转发到其他特定 url 例如 www site1 com 目录 gt
  • Git 中的数据完整性?

    我现在已经多次听到提到 Git 提供数据完整性 但是 这是什么意思 据我所知 git 中的所有对象都是使用 SHA 1 校验和来访问的 并且该校验和是根据文件的内容计算的 这意味着如果文件发生更改 您将得到不同的校验和 但这如何提供数据完整
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • 使用 LWP::Agent 的 Perl JSON::RPC::Client

    我被要求不使用 JSON RPC Client 而是使用 LWP 进行调用 这是我的代码 Server usr bin perl use strict use lib use ServerLib use JSON RPC Server Da
  • php将多维数组内爆为制表符分隔行

    我有一个多维数组 BlockData 其中有 13 个维度和 n 个数组元素 我需要将此数组内爆回单个长字符串 其中元素由 n 换行和尺寸由 t tabs 我尝试过使用array map 功能没有成功 需要帮助来完成此任务 请帮忙 这可以使
  • Heroku 应用程序上的 Nodejs Express EACCES 0.0.0.0:80

    我正在尝试在他们的网站上新创建的 Heroku 应用程序上运行 Node 应用程序 我按照他们的步骤操作 但在显示应用程序状态时仍然遇到错误 我跟着Node js 入门 https devcenter heroku com articles
  • Python:scikit learn 中正态分布的特征选择

    我有一个pandasDataFrame 其索引是唯一用户标识符 与唯一事件对应的列以及值 1 已参加 0 未参加 或 NaN 未受邀请 不相关 相对于 NaN 该矩阵相当稀疏 有数百个事件 而大多数用户最多只被邀请参加数十个 我创建了一些额
  • 函数地址不是实际代码地址

    在 Visual Studio 2008 C 中调试一些代码时 我注意到函数指针变量中的地址不是函数本身的实际地址 这是一个外部 C 函数 int main void printaddr const char print debug sho
  • AttributeError:tkagg没有属性cursord

    我最近重新安装了 anaconda 将目录从管理员帐户转移到我的个人帐户 以前 我对下面的代码没有任何问题 import matplotlib backends backend tkagg as tkagg defaultcursor tk
  • 如何在经历生命周期销毁时关闭 Activity?

    android 关闭 完成活动并仍希望其完成的方式是什么onPause onStop and onDestroy 我知道Activity finish 但这只能保证调用onDestroy 不是另外两个 原因 根据android文档 数据库访
  • Visual Studio 2013 中的内存分析

    我想探索如何在我的应用程序中分配内存 我有 C 控制台应用程序并使用 Visual Studio 2013 Professional I go to Analyze gt 性能和诊断并选择 NET内存分配 结果我得到以下总结 图表中每次CP
  • jQuery DatePicker 在可滚动 div 中时不随 HTML 内容移动

    我的表单大小受到限制 并且溢出样式设置为滚动 该表单包含许多 DatePickers 如果我打开其中一个 DatePicker 然后滚动面板 使用滚轮将焦点保持在 DatePicker 上 使其保持打开状态 DatePicker 不会随其附
  • Angular 2 SPA Azure Active Directory JWT 问题

    想知道是否有 Azure Active Directory Angular 2 Adal 专家可以提供帮助 我的设置如下 具有三个应用程序注册的 Azure Active Directory 一种用于 Web API 一种用于 WPF 应用
  • 禁用 ASP.net 文本框而不实际禁用它?

    在我的 ASP Net 应用程序中 有一个文本框可以从CalendarExtender 填充文本框后 它会将该日期与表单上的另一个日期进行检查并显示modalpopupextender如果日期错误 则会弹出窗口 但是 我不想允许用户输入此文
  • 如何通过填充 NSDictionary 以 JSON 格式发送 UIImage

    我正在尝试使用 JSON 将数据发送到服务器 我可以使用我的对象和关键参数创建 NSDictionary 但我想发送我的图片 图片是UIImage NSDictionary mainJSON NSDictionary dictionaryW
  • 如何使用“*ngIf else”?

    我正在使用 Angular 并且我想使用 ngIf else 自版本 4 起可用 在此示例中 div content here div div other content here div 我怎样才能实现相同的行为ngIf else 角度
  • 如何使用 PowerMockito 模拟私有字段? [复制]

    这个问题在这里已经有答案了 作为重复项提出的解决方案不是 PowerMockito 解决方案 因此无法回答此问题 此外 这个问题在下面得到了合理的回答 我不知道这是否是重复的 但我肯定找不到有问题的项目 如果是 我一直期望这非常简单 因为反
  • 如何插入元素作为第一个子元素?

    我想在每次单击按钮时使用 jquery 添加一个 div 作为第一个元素 div div class child div some text div div class child div some text div div class c