jq页面上append注意一次性追加完标签

在页面开发过程中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:我用的是谷歌浏览器,至于其他的浏览器我也就不知道了,最新的edge浏览器也是这样,实测!


转自:https://blog.csdn.net/hzspinga/article/details/52250562

猜你喜欢

转载自blog.csdn.net/qq_22771739/article/details/80554675