js原生方式实现jquery中的append()方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原生方式实现jquery中的append()方法相关的知识，希望对你有一定的参考价值。
一．在使用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
以上是关于js原生方式实现jquery中的append()方法的主要内容，如果未能解决你的问题，请参考以下文章
标签页（tab）切换的原生js,jquery和bootstrap实现