DOM内部插入

简介: DOM内部插入

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'));



相关文章
|
自然语言处理 前端开发 测试技术
【实训项目】“享学”APP设计
【实训项目】“享学”APP设计
225 0
|
存储 关系型数据库 MySQL
MySQL字段的字符类型该如何选择?千万数据下varchar和char性能竟然相差30%🚀
本篇文章来讨论MySQL字段的字符类型选择并深入实践char与varchar类型的区别以及在千万数据下的性能测试
MySQL字段的字符类型该如何选择?千万数据下varchar和char性能竟然相差30%🚀
|
机器学习/深度学习 人工智能 运维
探索AI在软件测试中的应用和影响
【2月更文挑战第17天】随着人工智能(AI)的飞速发展,其在各个领域的应用已经引起了广泛的关注。特别是在软件测试领域,AI技术的引入不仅改变了测试方法,提高了测试效率,还为测试质量提供了新的保障。本文旨在探讨AI在软件测试中的应用及其对传统软件测试的影响,以期为软件测试行业提供新的思路。
|
存储 编译器 C++
【C++关键字】auto的使用(C++11)
【C++关键字】auto的使用(C++11)
|
SQL 存储 数据库
第2章 关系数据库——2.2关系操作
第2章 关系数据库——2.2关系操作
|
Android开发 容器
Android上机实验-6 Fragment的使用
Android上机实验-6 Fragment的使用
187 1
|
消息中间件 存储 NoSQL
延迟消息的五种实现方案
生产者把消息发送到消息队列中以后,并不期望被立即消费,而是等待指定时间后才可以被消费者消费,这类消息通常被称为延迟消息。延迟消息的应用场景其实是非常的广泛,比如以下的场景:
884 0
延迟消息的五种实现方案
|
数据采集 机器学习/深度学习 云安全
怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收
CDN是业界公认的加速网站访问效率、提升用户体验的内容分发加速产品,也是互联网重要基础设施之一。阿里云CDN除了传统缓存、优化保障访问质量外,也天然具备边缘安全的优势。在安全问题更严峻、更频发、更复杂的互联网态势之下,加持安全防护的能力已经逐渐成为新一代CDN的标配。
3407 0
怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收
|
8天前
|
人工智能 运维 安全