<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$(".titleText").before(''
+'<table border="1" height="32" width="90">'
+'<tr><td>td1</td>'
+'<td>'
);
$(".titleText").after(''
+'</td>'
+'<td>td2</td></tr>'
+'</table>'
);
});
</script>
</HEAD><BODY>
<div class=titleText>测试A</div>
<div class=titleText>测试B</div>
<div class=titleText>测试C</div>
</BODY>
</HTML>上面是测试代码，里面的测试A和测试B,C应该在table里面的，但实际上却位于了table外
我用prepend和append这俩方法试了也不行。
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$(".titleText").before(''
+'<table border="1" height="32" width="90">'
+'<tr><td>td1</td>'
+'<td>'
);
$(".titleText").after(''
+'</td>'
+'<td>td2</td></tr>'
+'</table>'
);
});
</script>
</HEAD><BODY>
<div class=titleText>测试A</div>
<div class=titleText>测试B</div>
<div class=titleText>测试C</div>
</BODY>
</HTML>上面是测试代码，里面的测试A和测试B,C应该在table里面的，但实际上却位于了table外
我用prepend和append这俩方法试了也不行。
1. 使用after和before是添加同级的DOM, 不会嵌入到<div>之中. 如果想嵌入, 请用append或appendTo
2. 使用了append和appendTo是将一个dom插入到了<div>之中, 这个dom是和文本结点点同级的, 所以不会在table里
解决办法:
1. 直接用$(elem).html()直接写html内容, 用$(elem).text()获取文本结点, 然后拼接好html内容, 直接用.html()来写
2. 先创建<td>, 同理, 将文本节点通过.text()获取, append到<td>中, 再将<td>append到新建的<tr>中, 再将<tr>append到<table>中, 最后将<table>append到<div>中( 这是从内到外的逐级插入, 是一个比较好的编程习惯, 如果不按照此顺序, 很有可能会造成在ie下创建的结点在内存中无法释放的问题)
3. 建议封装成方法, 用$.fn.extend来做.
可以用html()置换:
$(".titleText").html("<table><tr><td>td1</td><td>"+$(".titleText").html()+"</td><td>td2</td></tr></table>");