一.在使用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原生代码实现的效果图:点击第一个p文本段,在后面追加一个<strong></strong>,再添加一个文本段,然后追加到p文本段后面
四.缺点:
在使用js代码实现时,样式方面实现有些小问题,在以后的学习中,继续补充,完善。
本文出自 “梦想需要坚持” 博客,请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1760806
原文地址:http://xiyin001.blog.51cto.com/9831864/1760806