码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-02-14 23:50:01      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:pen   创建元素   box   div   input   end   按钮   before   cti   

<input type="button" value="创建元素" id="btn">
<div id="box"></div>
<p id="main">这是文中一段话</p>
 
//点击按钮,动态创建元素

//方法一:$()创建元素,后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中。
 
$(‘#btn‘).click(function() {
 
  var el = $(‘<p>这是一个P标签</p>‘);
 
  // $(‘#box‘).append(el); //两种添加方法
 
  el.appendTo($(‘#box‘));
 
})

//方法二:.html()方法为元素 创建并添加子元素。 html() 还可以把其他地方元素添加进这个对象中。支持添加标签。
 
$(‘#btn‘).click(function() {
 
  $(‘#box‘).html(‘<h>标题是。。</h>‘);
 
})

//如DOM中创建元素方法
var box = document.getElementById(‘box‘);
var p = document.createElement(‘p‘);
p.innerText = ‘这是第二个哦~‘;
box.appendChild(p);
 

//jQuery中添加元素的方法:
var i = 1;
$(‘#btn‘).click(function () {
  var p = $(‘<p> 第二个p标签‘ + i + ‘</p>‘)
  i++;
//一、在元素内添加,可以把其他地方元素也添加进来:对象.html(‘元素及内容‘)
  $(‘#box‘).html($(‘#main‘));

//二、在元素内添加,依次(往后)添加:对象.append(元素) 或者 元素.appendTo(对象)
  $(‘#box‘).append($(‘#main‘));
  $(‘#box‘).append(p);

//三、在元素内添加,依次(往前)添加:对象.prepend(元素);
  $(‘#box‘).prepend(p);

//四、在元素前添加兄弟元素,依次(往后)添加:对象.before(元素);
  $(‘#box‘).before(p);
 
//五,在元素后添加兄弟元素,依次(往前)添加:对象.after(元素);
  $(‘#box‘).after(p);

})

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

标签:pen   创建元素   box   div   input   end   按钮   before   cti   

原文地址:https://www.cnblogs.com/zixuan00/p/10381251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!