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



相关文章
|
7月前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
1月前
|
JavaScript 前端开发 开发者
判断哪些数据的变化需要触发虚拟 DOM 的更新
判断哪些数据的变化需要触发虚拟 DOM 的更新,需要依据框架的响应式原理、组件的状态管理以及各种用户交互和异步操作等多方面因素。开发者需要深入理解所使用框架的工作机制,合理地组织和管理数据,以确保虚拟 DOM 的更新是高效且必要的。
25 2
|
4月前
|
JavaScript 前端开发 API
如何访问 DOM 中的元素
如何访问 DOM 中的元素
38 0
|
7月前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
54 2
|
JavaScript 前端开发
带你彻底学会JS DOM技术之创建,插入元素
1.创建元素 在JavaScript中,我们可以使用createElement()来创建一个元素节点,也可以使用createTextNode()来创建一个文本节点,然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”
399 0
带你彻底学会JS DOM技术之创建,插入元素
数据结构105-插入和修改操作封装代码
数据结构105-插入和修改操作封装代码
83 0
|
JavaScript
DOM外部插入
DOM外部插入
72 0
|
JavaScript 前端开发 API
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
312 0
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
|
JavaScript
DOM移除、替代、拷贝、遍历
DOM移除、替代、拷贝、遍历
85 0
|
JavaScript 前端开发
JavaScript中DOM节点的查找(遍历)
JavaScript中DOM节点的查找(遍历) 这篇文章讲一下DOM节点的查找,即DOM节点的遍历。说道遍历大家应该不陌生了,在js中,通过DOM节点的遍历,我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位,到了后期开始学习jQuery时会感觉方便很多。 整个DOM中,节点与节点之间的关系只有两种,兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。 HTML代码: &lt;div class=&quot;wrap&quot; style=&quot;position:relative&quot;&gt; &lt;div class=&quot;box&quot;&gt; 盒子01

热门文章

最新文章