jquery如何动态的添加一条html代码

 我来答
走近植物世界
高粉答主

2018-11-15 · 关注我不会让你失望
知道答主
回答量:461
采纳率:0%
帮助的人:12.3万
展开全部

添加新内容的四个 jQuery 方法:

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容


jQuery append() 方法

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

实例:

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



jQuery prepend() 方法

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);         // 追加新元素

}



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 - 添加元素

lizhanguo9
2014-11-01 · TA获得超过515个赞
知道小有建树答主
回答量:238
采纳率:0%
帮助的人:319万
展开全部
<div id="div"></div>
<script type="text/javascript">
$("#div").html("<p>这是添加的p</p>");
//或者
$("div").append("<b>Hello</b>");
</script>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式