一. 在使用jquery时,可以用append()方法实现在被选元素的结尾(内部)插入指定内容。
方法:$(selector).append(content),content为必需的。规定要插入的内容(可包含 HTML 标签)
二.在使用原生js时,使用appendChild() 方法可向节点的子节点列表的末尾添加新的子节点,
用法:parent.appendChild(child); child没有引号包住,child参数,是node类型。给一个空文档里面动态创建元素,要使用document.body.appendChild(child).
三.例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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>
</html>