在页面开发过程中append()函数是经常会用到的,今天遇到了一个很有意思的问题,这里来自我总结一下把!
定义和用法
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
今天页面的需求是用ajax查询后台数据,追加到页面的div中;这里需要说明一下的是向div追加的是一个table,这个table是由后台查询的数据拼接而成,再追加到div;
我遇到是啥问题那,就是我追加的table样式,全乱了,根本不是我想要的样式,但怎么调试也调试不好,最后F12看了一下页面我拼接的table就发现问题了,我写的是比较规范的html语言,但我在F12看页面的代码时,发现全乱了,完全是这样的
1. <table></table>
2. <tr></tr>
3. </ tr>
4. </table>
问题就在这里,第 1行和第2行红的代码 根本不是我写的,我就纳闷了,最后发现我的代码有问题:我的写法是:
$("#result").append("<table>");
$("#result").append("<tr>");
.........................................
最后改为:
var resultContent="";
resultContent+="<table>";
resultContent+="<tr>";
..................................
$("#result").append(resultContent);
这样就ok了,追加的样式也没有问题了,这里出现的问题就是,用append()追加成对的标签时,必须要一次性追加,如果开始标签和结束标签一个一个追加的话,浏览器会自动给你补上结束标签,这样反而会画蛇添足,无事生非!
ps:我用的是谷歌浏览器,至于其他的浏览器我也就不知道了!