通過兩段程式碼（相同功能效果）來表示其不同：

html部分：

<div class="wrapper">    <ul>        <li>111</li>        <li>222</li>        <li>333</li>        <li>444</li>        <li id="last">555</li>    </ul>    <button id="add">新增</button>    <button id="remove">刪除</button>    <button id="replace">替換</button>    <input type="text">    <input type="checkbox"></div>

首先是原生js的程式碼:

//獲取元素  var _ul = document.getElementsByTagName('ul');  var addBtn = document.getElementById('add');  var removeBtn = document.getElementById('remove');  var replaceBtn = document.getElementById('replace');  var _input = document.getElementsByTagName('input');  //事件操作  addBtn.onclick =function () {    //建立元素節點    var node = document.createElement('li');    //建立文字節點    var textNode = document.createTextNode('666');    //新增文字    node.appendChild(textNode);    //新增元素     _ul[0].appendChild(node)  };  removeBtn.onclick =function () {    //移除元素    _ul[0].removeChild(_ul[0].lastChild)  }  //替換元素  replaceBtn.onclick = function () {     var newNode = document.createElement('li');     var newText = document.createTextNode('hello');     var last = document.getElementById('last');     newNode.appendChild(newText);     _ul[0].replaceChild(newNode,_ul[0].lastChild);//父元素.replaceChild(新的節點，舊的節點)  }  //設定屬性   _input[0].setAttribute('placeholder','測試')  //獲取屬性  console.log(_input[0].getAttribute('placeholder'))  //  _input[1].setAttribute('checked','false');  console.log(_input[1].getAttribute('checked'));  //設定樣式  _input[0].style.backgroundColor = 'red';下面是jquery的程式碼（與上面實現效果相同）：
 

/獲取元素var $ul = $('ul');var $li = $('li');var $addBtn = $('#add');var $deleteBtn = $('#remove');var $replaceBtn = $('#replace');var $input1 = $('.one');var $input2 = $('.two');//事件操作$addBtn.click(function () {  //建立元素和文字節點  var $li = $('<li>666</li>');//也可不加$，var $li = '<li>666</li>';效果一樣  //新增元素  $ul.append($li);})$deleteBtn.click(function () {  //刪除元素  $ul.remove();//刪除被選元素和其子元素  $ul.empty();//刪除被選元素的子元素，此元素本身不會被刪除});$replaceBtn.click(function () {  var $newNode = $('<li>hello</li>');//建立節點  var $newNodeq = $('<li>helloq</li>');  //替換元素節點  $('li:first-child').replaceWith($newNodeq);//選擇要被替換的元素.relaceWith(新的節點元素)  $($newNode).replaceAll($('li:last-child'))//新的節點元素.replaceAll(選擇需要被替換的元素)})$input1.prop('placeholder','新增');$input2.attr('checked','true');console.log($input1.attr('placeholder'));console.log($input1.prop('placeholder'));console.log($input2.prop('checked'));//對checked 返回true或falseconsole.log($input2.attr('checked'))//對checked返回具體的值 //設定樣式 $input1.css('background-color','red')

另外，特此說明一下jquery中prop和attr的不同：jquery的版本不同，使用attr獲得的結果會不同，比如在在 1.9.0 的版本中：<input type="checkbox" /> <script> $(function() { $('input').click(function() { $(this).attr('checked');    });  }); </script> 點選 checkbox，結果都是 undefined！ 在 jQuery 1.6 之前，使用 attr() 有時候會出現不一致的行為，所以在jQuery 1.6 開始新增了一個方法 prop()，也是獲取屬性的方法； 使用$(this).prop('checked');結果就為true;  所以，具有true和false兩個屬性的屬性，如checked,selected或者disabled使用prop()，其他的使用attr()。看網上還有其他解釋（參考連結：https://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html）：

• 對於HTML元素本身就帶有的固有屬性（如標籤<a>中的屬性“href、target和class"），在處理時，使用prop方法。
• 對於HTML元素我們自己自定義的DOM屬性（如標籤<a>中的屬性action），在處理時，使用attr方法。

有不正確的地方，歡迎批評指正~~~