温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js原生方式实现jquery中的append()方法

发布时间:2020-09-10 11:46:21 来源:网络 阅读:18586 作者:蜗牛oscersong 栏目:web开发

一.在使用jquery时,

append() 方法在被选元素的结尾(仍然在内部)插入指定内容

使用方法:$(selector).append(content)content为必需的。规定要插入的内容(可包含 HTML 标签)      

二.在使用原生js时,使用appendChild() 方法可向节点的子节点列表的末尾添加新的子节点,

用法:parent.appendChild(child); child没有引号包住,child参数,是node类型。给一个空文档里面动态创建元素,要使用document.body.appendChild(child). 

三.例子

<style>
    .test{
    	color: red;
    	border:1px solid red;
    	display: inline-block;
    	font-size: 20px;
    	width: 200px;
    	height:50px;
    }
	</style>
</head>
<body>
	 <p id="p1">appendChild方法是在父级节点中的子节点的末尾添加新的节点</p>
	 <p id="p2">jquery中append方法在被选元素的结尾(仍然在内部)插入指定内容</p>
</body>
<script src="script/jquery-1.11.3.js"></script>
<script>
//用jquery来实现
$(function(){
		$("#p2").bind("click",function(){			
			 $(this).append("<strong>---我是用jquery实现的</strong>");
			})
	})
	//用原生js来实现
	/*window.onload=function(){
		var pobj=document.getElementById('p1');
		    pobj.onclick=function(){
		var strongobj=document.createElement('strong');			   
		var textobj=document.createTextNode("----我是使用原生Js实现的");		   		
		    pobj.appendChild(strongobj.appendChild(textobj));

		}
		
	}*/
</script>

效果图:点击第二个p文本段,在后面追加一个<strong>....</strong>

 js原生方式实现jquery中的append()方法

当把代码中的js原生代码实现的效果图:点击第一个p文本段,在后面追加一个<strong></strong>,再添加一个文本段,然后追加到p文本段后面

js原生方式实现jquery中的append()方法

四.缺点:

     在使用js代码实现时,样式方面实现有些小问题,在以后的学习中,继续补充,完善。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI