使用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. JNI工程搭建及编译

    JNI工程搭建及编译 建立Java工程 在具有C/C++比编译器的Eclipse中进行工程的创建,先创建一个简单的Java project,选项和一般同,这里仅仅需要将要调用的C/C++函数声明为na ...

  2. UVA116 Unidirectional TSP 单向TSP

    分阶段的DAG,注意字典序的处理和路径的保存. 定义状态d[i][j]为从i,j 出发到最后一列的最小花费,转移的时候只有三种,向上,向下,或平移. #include<bits/stdc++.h ...

  3. HTML5资源汇总(更新游戏引擎cocos2d-html5)

    我也是现学现用,想了解的可以看看效果,想知道实现的也有源码 http://cocos2d-html5.org Cocos2d-HTML5 API和Cocos2d-x一致,同样的代码可以支持cocos2 ...

  4. Python-OpenCV:cv2.imread(),cv2.imshow(),cv2.imwrite()

    为什么使用Python-OpenCV? 虽然python 很强大,而且也有自己的图像处理库PIL,但是相对于OpenCV 来讲,它还是弱小很多.跟很多开源软件一样OpenCV 也提供了完善的pytho ...

  5. WPF中播放视频音频

    首先要在WPF中播放视频和音频,我们就需要用到MediaElement控件,下面我们示例播放音频和视频. 用MediaElement播放音频: 第一步:将你需要播放的音频(mp3)放在你WPF项目的D ...

  6. vue的使用-项目总结

    1,这是一个重前端逻辑,轻交互,数据展示的项目,可读性差,2,组件划分的坑,复用过多的坑,复用过多导致要在js手动判断太多东西,不便于可读3,vuex的坑,数据分为后台请求数据的暂存,前端页面逻辑的状 ...

  7. Python 输入输出 数据类型 变量

    python输入输出 数据类型 变量 输入输出 print()在Python3中是函数 >>>print('hello world') #print注意print前面不要有任何空格 ...

  8. (5)JSTL的xml标签库

    Jstl的XML标签库 JSTL提供了操作xml文件的标签库,使用xml标签库可以省去使用Dom和SAX标签库的繁琐,能轻松的读取xml文件的内容. <%@ taglib uri="h ...

  9. nib、xib、storyboard(故事板)

    nib:NeXT Interface Builder的缩写 xib:XML nib的缩写 相同点: nib和xib都是Interface Builder的图形界面设计文档.Interface Buil ...

  10. ios面试题(三)

    4.写一个setter方法用于完成@property (nonatomic,retain)NSString *name,写一个setter方法用于完成@property(nonatomic,copy) ...