一、展示

1、初始页面

2、各追加1次

3、各追加2次

4、各追加3次

二、代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>html</title><style>body{margin: 20px;}th{padding: 5px;}button{margin: 20px;}table{border-collapse: collapse;  /**设置小表格之间的间距为0*/border-right:1px solid orange;border-top:1px solid orange;}table tr td,th{border-left:1px solid orange;border-bottom:1px solid orange;}</style><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Append追加
<table class="append-add"><thead><tr><th>姓名</th><th>年级</th><th>年龄</th></tr></thead><tbody></tbody>
</table><hr/>
Html追加
<table class="html-add"><thead><tr><th>姓名</th><th>年级</th><th>年龄</th></tr></thead><tbody></tbody>
</table><button id="button1">append追加</button>
<button id="button2">html追加</button>
</body>
<script>//append追加按钮$('#button1').click(function () {let html = getTableHtml();$('.append-add tbody').append(html);});//html追加按钮$('#button2').click(function () {let html = getTableHtml();$('.html-add tbody').html(html);});/*** 获取表格tr数据* @returns {string} 拼接的字符串*/function getTableHtml() {return `<tr><td>姓名1</td><td>年级1</td><td><input value="1"/></td></tr><tr><td>姓名2</td><td>年级2</td><td><input value="2"/></td></tr><tr><td>姓名3</td><td>年级3</td><td><input value="3"/></td></tr>`;}
</script>
</html>

三、总结

它们的功能缺失有点相似，但是实际上本质上是有区别:

append()函数是为指定元素尾部附加内容，
而html()函数是重置元素内部的html内容。

Jquery之append()和html()的区别相关推荐

JQuery之append和appendTo的区别，还有js中的appendChild用法
JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择 ...
jQuery中append()和appendTo()的区别
[前言] 简单总结下jQuery中append()和appendTo()的区别 [主体] 1.简单理解 (插入对象不同) append()前面是被插入的对象,后面是要在对象内插入的元素内容 appen ...
jquery中append与appendTo方法区别
1. append(content)方法方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...
jquery after append appendTo三个函数的区别
jq文档的说明是 1.after函数定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...
jquery append()和appendTo() 的区别
append()和appendTo() 的区别 append() $(selector).append(content,function(index,html)) 在A的后面添加B content,可 ...
Jquery中bind和live的区别
Jquery中bind和live的区别 Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind(" ...
append和appendTo的区别以及js中的appendChild用法
append和appendTo的区别以及js中的appendChild用法很多像我一样接触JS没多久的小白对append和appendTo的区别以及js中的appendChild用法都会有所模糊,下 ...
append和appendTo的区别浅析
二者差别并不大! 在jq文档中,显示二者不同之处在于:内容的位置和选择器. 示例如下: append的写法为: (要插入的对象).append(插入什么内容) appendTo的写法为: (插入什么内 ...
JQuery中removeProp()与removeAttr()的区别，You know？
JQuery中removeProp与removeAttr的区别 1.removeProp()函数详解语法: 注意: 返回值移除onclick事件: 2.removeAttr() 函数详解语法: ...
无法解析 list 中的方法 iterator_Python-list中的append()和extend()方法区别
一.append()和extend()方法都是用来添加数据到list末尾的,两者的区别: append()添加的时候会把添加的数据当成一个整体进行添加,允许添加任意类型的数据 extend()添加的时 ...

Jquery之append()和html()的区别

目录

一、展示

1、初始页面

2、各追加1次

3、各追加2次

4、各追加3次

二、代码

三、总结

Jquery之append()和html()的区别相关推荐

最新文章

热门文章