在新公司开发编码的时候,经常写js代码;有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html。
1.innerHTML属性
w3school给的解释为:innerHTML 设置或返回表格行的开始和结束标签之间的 HTML。其语法如下:
tablerowObject.innerHTML=HTML
这里我想说的是DOM元素的innerHTML属性是只读的,不能用来设置某个标签里的html脚本;比如说
<div class="device_table">
<span>设备列表:</span>
<table>
<colgroup>
<col style="width:20px" />
<col style="width:5%" />
<col style="width:13%" />
<col style="width:13%" />
<col style="width:13%" />
<col />
</colgroup>
<tr>
<th><input type="checkbox" class="checkall" for=".checkitem" /></th>
<th>序号</th>
<th>设备名</th>
<th>设备类型</th>
<th>IP地址</th>
<th>端口</th>
</tr>
<tbody id="device_lists"></tbody>
</table>
</div>
你就不能用下面的代码往tbody中插脚本:
$("#device_lists").innerHTML="<tr><td><input type="checkbox"/></td><td>1</td><td>hk80</td><td>hk</td><td>192.168.1.101</td><td>8080</td></tr>"
这样做的结果是:tbody里面还是什么都没有;如果想往某个dom元素中添加html脚本需要用html()。
2.html()
这个方法很简单,没有什么要说的,直接贴w3school的解释
定义和用法
html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。
语法
$(selector).html()
设置元素内容
当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。
语法
$(selector).html(content)