原生js實現append()方法


一.在使用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM