学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery - DOM 操作之添加元素内容

点击:

    在jQuery的DOM操作中,向元素添加新的内容或者子元素是非常方便的,可以使用:

    • append() - 在所选节点元素的结尾插入内容
    • prepend() - 在所选节点元素的开头插入内容
    • after() - 在所选节点元素之后插入内容
    • before() - 在所选节点元素之前插入内容

    一、使用jQuery的append()方法向所选节点元素的结尾插入内容

    $("#cur_dom").append("这里是需要添加的文本");
    $("#cur_dom").append("这里也可以使<p>迷糊馆</p>html相关的内容");

    插入新数据后的样式类似如下:

    <div id="cur_dom">这是原始数据:这里是新插入的数据</div>

    二、使用jQuery的prepend()方法向所选节点元素的开头插入内容

    $("#cur_dom").prepend("这里是需要添加的文本");
    $("#cur_dom").prepend("这里也可以使<p>迷糊馆</p>html相关的内容");

    数据插入后如下:

    <div id="cur_dom">这里是新插入的数据:这里是原始数据</div>

    PS;需要注意的是,jQuery中的append()和prepend()不管是向所选节点元素结尾还是开头插入新内容,都是在元素闭合标签内部的DOM操作,插入的内容也还在节点元素的包裹内。

    三、使用jQuery的after()方法在所选节点元素之后插入内容

    $("#cur_dom").after("向该闭合标签后插入新内容");

    <div id="cur_dom">这里是原始数据</div>
    这里是新插入的数据

    四、使用jQuery的before()方法在所选节点元素之前插入内容

    $("#cur_dom").before("向该闭合标签前插入新内容");

    新数据插入后如下:

    这里是新插入的数据
    <div id="cur_dom">这里是原始数据</div>
    PS;与jQuery中的append()和prepend()方法相比,jQuery的after()和before()方法明显的区别是,插入的新内容不属于该元素标签,是在闭合标签外部添加的,至少适合所选标签平级的存在。
赞一个(0)     踩一个(0)