向元素中追加内容
如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。
如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容
append()语法形式:$(html).append(content)
appendTo()语法形式:$(content).appendTo(html)
before()的语法形式:$(html).before(content)
after()的语法形式:$(html).after(content)
参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。
示例如下:
(1)描述
向p标记中或前或后分别追加内容。
(2)代码实现
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
var $content = "**我是append()方法追加的内容**";
var $contentTo = "**我是appendTo()方法追加的内容**";
var $before = "**我是before()方法追加到前面的内容**";
var $after = "**我是before()方法追加到后面的内容**";
$("#id1").append($content);
$($contentTo).appendTo("#id2");
$("#id3").before($before);
$("#id4").after($after);
})
</script>
...省略代码
<p id="id1">append()追加内容:</p>
<p id="id2">appendTo()追加内容:</p>
<p id="id3">before()追加到前面</p>
<p id="id4">after()追加到后面</p>
任务:把上面jQuery中的操作在代码框中重现。