零基础学做网站培训介绍

当前位置:

jquery 添加html内容到DIV的方法

jquery 添加html到DIV的方法有很多,先介绍一下原生JS追加html到DIV的方法:


<script>
window.onload = function() {
var testdiv = document.getElementById("course");
testdiv.innerHTML='<a href="https://www.xuewangzhan.net/" rel="nofollow">学做网站论坛</a>';
}
</script>

一、在元素内部/外部追加元素

append,prepend:添加到子元素 before,after:作为兄弟元素添加
Html代码如下:


<div id="content">
<p>在我的后面追加一条新闻</p>
</div>

Javascript代码如下:


<script type="text/javascript">
jQuery(function(){
//在元素内部追加内容
$("#content").append("<p>姚明退役了...</p>");
})
</script>

在#content里面添加元素,这是把<p>姚明退役了...</p>作为子元素添加到#content,如果想在元素外部追加元素,需要用到after,这样的话就可以把<p>姚明退役了...</p>作为兄弟元素追加到#content后面
Javascript代码如下:


<script type="text/javascript">
jQuery(function(){
//将span添加到追加到content1的后面
$("#content").after("<p>姚明退役了...</p>");
})
</script>

二、在元素的不同位置追加内容
Html 代码如下:


<div id="content1" style="border:1px solid red">
<p>窗前明月光</p>
</div>
<span>疑是地上霜</span>

Javascript代码如下:


<script type="text/javascript">
jQuery(function(){
//将span添加到追加到content1的后面
$("span").appendTo("#content1");
})
</script>

三、在元素的开始位置追加内容

Html 代码如下:


<div>
<div id="content">
<p>在我的后面追加一条新闻</p>
</div>

Javascript代码如下:


<script type="text/javascript">
jQuery(function(){
//在元素的开始位置追加内容
$("#content").prepend("<p>头部</p>");
})
</script>

四、在不同元素的开始位置追加内容

Html 代码如下:


<div id="content">
<p>在我的后面追加一条新闻</p>
</div>
<span>疑是地上霜</span>

Javascript代码如下:


<script type="text/javascript">
jQuery(function(){
//在不同元素的开始位置追加内容
$("span").prependTo("#content");
})
</script>

在#content里面添加元素,这是把<span>疑是地上霜</span>作为子元素添加到#content开始地方,如果想在元素外部添加开始元素,需要用到before,这样的话就可以把<span>疑是地上霜</span>作为兄弟元素追加到#content开始了

代码如下:


<script type="text/javascript">
jQuery(function(){
//在不同元素的开始位置追加内容
$("span").before("#content");
})
</script>

五、用指定结构的元素包含元素

Warp(html)
在指定的html中指定html元素,但指定的元素中不可含有兄弟元素,否则不能正常的运行,并且不含有一般文本字符串,下面的代码用div标签包含p标签
html代码如下:


<form id="form1" runat="server">
<span>将我包含在div中</span>
</form>

javascript代码如下:


<script type="text/javascript">
jQuery(function(){
$("span").wrap("<b></b>");
})
</script>

六、用指定的元素包含多个html元素

warpAll(html)
html代码如下:


<form id="form1" runat="server">
<p>p内容</p>
<p>p内容</p>
<p>p内容</p>
</form>

javascript代码如下:


<script type="text/javascript">
jQuery(function(){
$("p").wrapAll("<div style='border:1px solid red'><p></p></div>");
})
</script>

七、用指定的标签包含子元素
wrapInner(html)
与warp方法一样,在html中指定html元素,例如:
用b标签包含p标签中文字的代码如下:
html代码如下:


<p>将p标签的文字用b标签包含起来</p>
<p>也将p标签的文字用b标签包含起来</p>

javascript代码如下:


<script type="text/javascript">
jQuery(function(){
$("p").wrapInner("<b></b>");
})
</script>

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 网页如何添加背景音乐 视频教程附件下载 (1109533 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 网页如何添加视频动画 视频教程 (1100813 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 学习了一些HTML知识,我们就可以自己动手去写一些HTML代码了。那么用什么写了,这就要用HTML 编辑器。常用的HTML 编辑器有二种就是记事本和Dreamweave
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote
  • 各类微博的流量很大,如果自己网站内容能够同步更新到自己的微博上,可以让更多的人看到自己网站上的内容了。如何将自己网站内容同步更新到微
  • 提高网站的“回头客”,我们需要给注册会员提供一些特权,而对游客隐藏部分wordpress文章,因为有很多自己做网站论坛vip学员问到,所以这里就提供一段代
  • 在自己做网站论 坛的公司模板制作的课程中,跟大家讲了一个分页插件,那就是wordpress分页插件wp-page-numbers,这个插件特别的棒,如果我们网站的内容很
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 不是作业 但是找了下版块 不知道发那里 貌似只有这里特别合适。之所以决定自己写CSS 是由于看了建站课程里的DIV+CSS课程,为记忆CSS而作出的决定;另外
  • CSS如何调整DIV顶部边距 图文教程 (115936 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎