js原生怎么做到jquery append方法的效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js原生怎么做到jquery append方法的效果相关的知识，希望对你有一定的参考价值。
参考技术A Element常用方法1.appendChild(node)
//增加内容
向当前对象追加节点,example:
<div
id="test">123</div>
<script type="text/javascript">
var
newdiv=document.createElement("div");
var newtext=document.createTextNode("A
new div");
newdiv.appendChild(newtext)
;
document.getElementById("test").appendChild(newdiv)
;
</script>
当然,上面的功能用document.getElementById("test").innerhtml="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.本回答被提问者和网友采纳
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方法的效果的主要内容，如果未能解决你的问题，请参考以下文章