使用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. POJ 1947 Rebuilding Roads (树形DP)

    题意:给一棵树,在树中删除一些边,使得有一个连通块刚好为p个节点,问最少需要删除多少条边? 思路: 因为任一条边都可能需要被删除,独立出来的具有p个节点的连通块可能在任意一处地方.先从根开始DFS,然 ...

  2. codevs 2776 寻找代表元

     时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold     题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号.广州二中苏元实验 ...

  3. java.lang.NoClassDefFoundError: org/w3c/dom/ElementTraversal问题解决

    使用Maven构建项目并加载spring配置文件时,报如下异常 Caused by: java.lang.ClassNotFoundException: org.w3c.dom.ElementTrav ...

  4. JS中的delete操作符

    首先,delete删除成功返回true,失败返回false. js代码: function wxCount ($element) { this.init($element); } wxCount.pr ...

  5. winhex与磁盘格式与 数据恢复

    第一阶段: 熟悉WinHex的使用. n 熟悉磁盘工具的使用. n 利用WinHex查看物理磁盘和逻辑磁盘. n 了解WinHex中相关工具的用法. 以管理员身份运行winhex(以便之后修改) 上方 ...

  6. Velocity模板语法说明

    Velocity基本语法 "#"用来标识Velocity的关键字,包括#set.#if .#else.#end.#foreach.#end.#include.#parse.#mac ...

  7. PAT (Basic Level) Practise (中文)-1033. 旧键盘打字(20)

    PAT (Basic Level) Practise (中文)-1033. 旧键盘打字(20)  http://www.patest.cn/contests/pat-b-practise/1033 旧 ...

  8. PLAYGROUND 延时运行

    PLAYGROUND 延时运行 由 王巍 (@ONEVCAT) 发布于 2015/09/16 从 WWDC 14 的 Keynote 上 Chris 的演示就能看出 Playground 异常强大,但 ...

  9. HTML5 Canvas奇幻色彩Loading加载动画

    转自   https://www.html5tricks.com/tag/loading%E5%8A%A8%E7%94%BB/

  10. mysql 5.5安装/卸载使用总结

    安装 卸载 1.在控制面板->卸载与更改程序 中卸载mysql 2.删除安装目录下的mysql文件夹 3.删除隐藏文件夹C:\ProgramData\中的MySQL,否则再次安装时会卡在 sta ...