方法 | append() , appendTo() |
---|---|
描述 | 插入到所选元素内部的子元素的最后面 |
举个栗子
append(),appendTo()
<div>世界</div>
<ul>
<li>七月</li>
</ul>
<script>
$('div').append('<span>你好</span>');
// 等同于
$('<span>你好</span>').appendTo('div');
// 结果 => <div>世界<span>你好</span></div>
// div元素为所选元素,而span元素为插入的内容。
// 注意:appendTo前面一定要是jquery对象。
var ul = $('ul');
// 添加DOM对象:
ul.append('<li>你好</li>');
// 添加jQuery对象:
ul.append($('#box'));
// 添加函数对象:
ul.append(function () {
return '<li><span>你好</span></li>';
});
</script>
appendChild()
<div id="box">你好</div>
<script>
var boxp=document.createElement('p');
var box=document.getElementById('box');
boxp.innerHTML="七月";
box.appendChild(boxp);
</script>
结果 => <div id="box">你好<p>七月</p></div>
方法 | prepend(),prependTo() |
---|---|
描述 | 所选元素的开头(仍位于内部)插入指定内容。 |
举个栗子
prepend(),prependTo()
<p>你好</p>
<script>
$("p").prepend("<b>世界</b> ");
// 等同于
$("<b>世界</b>").prependTo("p");
// 结果 => <p><b>世界</b>你好</p>
// p元素为所选元素,b元素为指定内容。
</script>