使用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. (三)VMware harbor使用http访问

    参考:https://www.cnblogs.com/biglittleant/p/7283738.html harbor使用http访问 如果使用http启动harbor需要在docker中配置-- ...

  2. http常用状态吗以及分别代表什么意思?

    http常用状态码: 状态码 定义 说明 1xx 信息 街道请求继续处理 2xx 成功 成功的收到.理解.接受 3xx 重定向 浏览器需要执行某些特殊处理一完成请求 4xx 客户端错误 请求的语法有问 ...

  3. Java--对象和引用 转载

    这个讲的很详细,看了以后终于懂了.特转载供以后学习使用. 原文链接:http://www.cnblogs.com/dolphin0520/p/3592498.html

  4. 【贪心 堆】luoguP2672 推销员

    堆维护,贪心做法 题目描述 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有N家住户,第i家住户到入口的距离为S ...

  5. C语言获取Shell返回结果

    Linux编程时候,如果我们需要调用shell命令或脚本通常使用system方法.如system("ls") 该方法返回值为0或-1,即成功或失败.而有的时候我们想要获取shell ...

  6. Cassandra 数据库安装部署

    安装版本 cassandra-3.11.4 系统版本 more /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 准备工作 Cassan ...

  7. LeetCode(114) Flatten Binary Tree to Linked List

    题目 分析 按要求转换二叉树: 分析转换要求,发现,新的二叉树是按照原二叉树的先序遍历结果构造的单支二叉树(只有右子树). 发现规则,便容易处理了.得到先序遍历,构造即可. AC代码 /** * De ...

  8. PAT Basic 1028

    1028 人口普查 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过200岁的老人,而 ...

  9. shell 几中专用修饰符 :- :+ := ${variable:offset:length}

    1.${variable:-word} ${variable:-word} 如果variable已经被设置了,且不为空,则代入它的值,否则代入word; $ fruit=peach $ echo ${ ...

  10. 00036_private

    1.私有private 描述人.Person: 属性:年龄: 行为:说话:说出自己的年龄. class Person { int age; String name; public void show( ...