jquery添加html代码,怎样动态的添加一条html代码?

KLQ 2020-08-03 10:20:15 java常见问答 4202

下面的文章内容要给大家介绍的就是jquery动态的添加html代码的内容,那么你知道应该如何添加吗?一起来看看方式吧。

添加新bai内容的4个jquery方法,分别是append() - 在被bai选元素的结尾插入内du容;prepend() - 在被选元素的开头插zhi入内容;after() - 在被选元素之后插入内容;before() - 在被选元素之前插入内容。

1、jQuery append()方法-在被选元素的结尾插入内容。

例子:

$("p")
    .append("Some appended text.");

2、jQuery prepend()方法-在被选元素的开头插入内容。

例子:

$("p")
    .prepend("Some prepended text.");

通过append()和prepend()方法添加若干新元素,在上面的例子当中,只在被选元素的开头/结尾插入文本/HTML,可是,append()和prepend()方法可以通过参数接收无限数量的新元素,可以通过jQuery来生成文本/HTML或者通过JavaScript代码和DOM元素,下面的话,创建若干个新元通过text/HTML、jQuery或者是JavaScript/DOM来创建,通过append()方法将这些新元素追加到文本中(对prepend()同样有效)。

例子:

function appendText() {
    var txt1 = "<p>Text.</p>"; // 以 HTML 创建新元素
    var txt2 = $("<p></p>")
        .text("Text."); // 以 jQuery 创建新元素
    var txt3 = document.createElement("p"); // 以 DOM 创建新元素
    txt3.innerHTML = "Text.";
    $("p")
        .append(txt1, txt2, txt3); // 追加新元素
}

3、jQuery after()和before()方法

jQuery after()方法在被选元素之后插入内容;jQuery before() 方法在被选元素之前插入内容。

例子:

$("img")
    .after("Some text after");
$("img")
    .before("Some text before");

通过after()和before()方法添加若干新元素,after()和before()方法可以通过参数接收无限数量的新元素,可以通过text/HTML、jQuery或者JavaScript/DOM来创建新元素,下面创建若干新元素通过text/HTML、jQuery或JavaScript/DOM来创建,之后,通过 after()方法将这些新元素插到文本中(对 before() 同样有效)。

例子:

function afterText() {
    var txt1 = "<b>I </b>"; // 以 HTML 创建新元素
    var txt2 = $("<i></i>")
        .text("love "); // 通过 jQuery 创建新元素
    var txt3 = document.createElement("big"); // 通过 DOM 创建新元素
    txt3.innerHTML = "jQuery!";
    $("img")
        .after(txt1, txt2, txt3); // 在 img 之后插入新元素
}

jquery添加html代码

以上就是对于jquery添加html代码的方法介绍了,你都清楚了吧,假如你还想了解更多和jquery相关的知识,以及一些java常见问题及解决方法,那么就请继续关注奇Q工具网来进行了解吧。

推荐阅读:

jquery中ajax完整例子怎么写?jquery中的ajax有什么用?

jquery框架是什么?定义概念介绍

jquery框架原理是什么?jquery原理解析