通过两段代码（相同功能效果）来表示其不同：
html部分：
<div><ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<button>新增</button>
<button>删除</button>
<button>替换</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或false
console.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方法。
有不正确的地方，欢迎批评指正~~~