标签的innerHTML属性和html()

Posted 2020-07-07

在新公司开发编码的时候，经常写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)