最近搜索

jquery 追加元素append、prepend、before、after用法与区别分析

浏览:94
管理员 2024-04-24 12:05




before和prepend


before:在被选元素之前添加的内容(内容外面)

prepend:在被选元素的前面添加的内容(内容的里面)

var trs =  $("#count_table tr");
// 创建一个临时的<div>元素,并将要插入的HTML内容添加到其中
var tempDiv = $("<div></div>").html('<tr data-v-9366c256="">\n' +
    '    <td data-v-9366c256="">总数</td>\n' +
    '    <td data-v-9366c256="">' + totals[5] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[6] + '</td>\n' +
    '</tr>');
// 将临时<div>元素中的内容插入到指定位置之前
$(trs.get(1)).before(tempDiv.html());



after和append


after:在被选元素之后添加的内容(内容外面)

append:在被选元素的后面添加的内容(内容的里面)



jquery的插入外部


after() 元素外的后面插入

insertAfter() 把内容插入到元素外的后面

before() 在元素外的前面插入内容

insertBefore() 把内容插入到目标元素外的后面

console.log(totals);
var newTr = $('<tr class="el-table__row">\n' +
    '                                <td rowspan="1" colspan="1" class="el-table_1_column_1  el-table__cell">\n' +
    '                                    <div class="cell">总数</div>\n' +
    '                                <td rowspan="1" colspan="1" class="el-table_1_column_8    el-table__cell">\n' +
    '                                    <div class="cell">'+totals[6]+'</div>\n' +
    '                                </td>\n' +
    '                            </tr>');
newTr.insertAfter('#table tbody tr:first-child');





append before 添加的内容 不是html  是字符串 文字 。


有可能 有这个异常。


在您的代码中,您使用了 jQuery 的 before() 方法来在指定元素之前插入新的 HTML 内容。但是由于您传递的是一个字符串,jQuery 会将其作为文本内容插入,而不会将其解析为 HTML。

为了确保插入的内容被解析为 HTML,您可以使用 jQuery 的 append() 方法来首先将内容添加到一个临时的 <div> 元素中,然后再将该 <div> 元素的内容插入到指定位置。以下是修改后的代码示例:


console.log(totals);
//放到这节点 的前面。
var trs =  $("#count_table tr");
// 创建一个临时的<div>元素,并将要插入的HTML内容添加到其中
var tempDiv = $("<div></div>").html('<tr data-v-9366c256="">\n' +
    '    <td data-v-9366c256="">总数</td>\n' +
    '    <td data-v-9366c256="">' + totals[0] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[1] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[2] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[3] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[4] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[5] + '</td>\n' +
    '    <td data-v-9366c256="">' + totals[6] + '</td>\n' +
    '</tr>');
// 将临时<div>元素中的内容插入到指定位置之前
$(trs.get(1)).before(tempDiv.html());



联系站长

站长微信:xiaomao0055

站长QQ:14496453