DOM内部插入
1、text()
方法描述:设置/获取元素的文本内容,该方法读写合一。
需求描述:设置p段落标签的内容为“我是段落”
<p></p>
$('p').text('我是段落');
2. html()
方法描述:设置/获取元素的html内容,该方法读写合一。
需求描述:设置ul列表标签的li列表项
<ul></ul>
var li = '<li>我是列表项</li>'; $('ul').html(li);
3.需求描述:获取ul列表中的列表项并输出
<ul><li>我是列表项</li></ul>
console.log($('ul').html());
4.需求描述:获取ul列表中的列表项并输出
<ul> <li>我是列表项1</li> <li>我是列表项2</li> </ul>
var last = '<li>我是最后一个列表项</li>'; $('ul').append(last);
5.append()
方法描述:向当前匹配的所有元素内部的最后面插入指定内容。
需求描述:为当前的ul向后添加一个列表项
<ul> <li>我是列表项1</li> <li>我是列表项2</li> </ul>
var last = '<li>我是最后一个列表项</li>'; $('ul').append(last);
6. prepend()
方法描述:向当前匹配的所有元素内部的最前面插入指定内容。
需求描述:为当前的ul向前添加一个列表项
<ul> <li>我是列表项1</li> <li>我是列表项2</li> </ul>
var first = '<li>我是第一个列表项</li>'; $('ul').prepend(first);
7.prependTo()
方法描述:将指定的内容追加到当前匹配的所有元素的最前面。
需求描述:为当前的ul向前添加一个列表项
<ul> <li>我是列表项1</li> <li>我是列表项2</li> </ul>
var first = '<li>我是第一个列表项</li>'; $(first).prependTo($('ul'));