使用jquery创建新元素的方法为:$(html标签),例如 $("<p></p>")创建了一个段落。注意此时只是创建了对象,尚未添加到文档节点中去;以下四个 jQuery 方法可以添加新内容到文档树中:

  • append() - 在被选元素的结尾插入内容

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

下面进行实例演示:点击“添加”按钮,新建一个input文本框

1、HTML结构

<input type="text" id="test_input">
<input type='button' value='添加'/>

2、javascript代码

$(function(){	
$("input[type='button']").click(function() {
new_obj = $("<input type='text'>");
$(this).before(new_obj);
});
});

【jquery创建元素添加元素】的更多相关文章

  1. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  2. js+jquery创建元素

    例:创建如下标签: <a id="baidu" class="link" name="baidu">这是一个链接</a&g ...

  3. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

  4. jQuery创建元素和添加子元素

    var li = $("<li class=\"TopNav arrow\" secondMenu=\"menu_" + i + "\ ...

  5. jquery创建元素并添加到另一个元素中

    $('<tr>').data('code', code)        .append(            // 方法            $('<td>').appen ...

  6. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  7. 用jQuery创建HTML中不存在的标签元素碰到的问题

    如果你自定义了一个标签,比如<aaa></aaa> 用jQuery的写法,比如var custom_element = $('<aaa class="ee&qu ...

  8. jQuery中动态创建、添加元素的方法总结

    <input type="button" value="创建元素" id="btn"> <div id="box ...

  9. jQuery基础之(四)jQuery创建DOM元素

    利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...

随机推荐

  1. tomcat 发布本地文件

    应用场景,通过web,jsp访问本地mouse文件夹的静态文件 通过修改tomcat配置文件server.xml <!--在Host标签下加入Context标签,path指的是服务器url请求地 ...

  2. HDU 4291 A Short problem 短问题 (递推,找规律)

    题意: 给出递推式 g(n) = 3g(n - 1) + g(n - 2),且g(1) = 1,g(0) = 0.求g( g( g(n))) mod 109 + 7. 思路: 要求的g( g( g(n ...

  3. iOS(iPhone,iPad))开发(Objective-C)开发库常用库索引

    http://www.code4app.com 这网站不错,收集各种 iOS App 开发可以用到的代码示例  http://www.cocoacontrols.com/ 英文版本的lib收集  ht ...

  4. WPF中实现两个窗口之间传值

    在使用WPF的时候,我们经常会用到窗体之间传值,下面示例主窗口传值到子窗口,子窗口传值到主窗口的方法. 一.主窗口向子窗口传值 主窗口向子窗口传值主要方法就是在子窗口建立一个接收主窗口值的变量,然后实 ...

  5. Linux网卡设置为网桥模式

    Linux网卡设置为网桥模式 1.    添加网卡,并修改相关配置文件 1.1虚拟机添加网卡,并配置相关文件 如:eth2为新添加网卡 cd /etc/sysconfig/network-script ...

  6. CS193p Lecture 11 - UITableView, iPad

    UITableView 的 dataSource 和 delegate dataSource 是一种协议,由 UITableView 实现,将 Model 的数据给到 UITableView: del ...

  7. Python学习记录1

    交互式解释器 模块 python序列 索引提取 序列运算 空列表 成员资格 长度最大值最小值函数 列表 list和join函数 交互式解释器 ' >>> '为提示符. 语句是用来告诉 ...

  8. [LUOGU] P1536 村村通

    题目描述 某市调查城镇交通状况,得到现有城镇道路统计表.表中列出了每条道路直接连通的城镇.市政府"村村通工程"的目标是使全市任何两个城镇间都可以实现交通(但不一定有直接的道路相连, ...

  9. [LUOGU] 1002 过河卒

    题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为"马拦过 ...

  10. JS原生增删,判断class是否存在方法

    function hasClass(obj, cls) { if (obj.className) { return obj.className.match(new RegExp('(\\s|^)' + ...