jquery的DOM节点操作(创建和插入元素节点)

1.创建元素节点

在这里插入图片描述

2.插入节点

动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来。
按照元素的层次关系来分,可以分为内部和外部两种方法

元素内部插入子节点

元素内部插入子节点有两种方式,推荐使用红框框的方式
在这里插入图片描述

//元素内部插入子节点示例代码
	// 动态创建li元素节点
	var $li = $("<li>"+$(this).val()+"</li>"); 
	//将li元素节点追加到ul元素末尾
	$li.appendTo($("ul"));	
	//将li元素节点追加到ul元素首部
	$li.prependTo($("ul"));

元素外部插入同辈节点

元素外部插入同辈节点也有两种方式,推荐使用红框框的方式
在这里插入图片描述

//元素外部插入同辈节点案例
	//动态创建一个div节点元素
	var $div = $("<div>111</div>"); 
	//将div元素节点放到ul元素节点上面
	$div.insertBefore($("ul"));
	//将div元素节点放到ul元素节点后面
	$div.insertAfter($("ul"));
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值