网站内容添加(jquery添加html到DIV的方法有很多，先介绍一下原生追加 )
优采云 发布时间: 2021-11-12 00:14网站内容添加(jquery添加html到DIV的方法有很多，先介绍一下原生追加
)
jquery中有很多方法可以将html添加到DIV中。首先介绍一下原生JS中给DIV添加html的方法：
window.onload = function() {<br />
var testdiv = document.getElementById("course");<br />
testdiv.innerHTML='学做网站论坛';<br />
}<br />
一、在元素内部/外部添加元素
append, prepend：添加到子元素之前，之后：添加为兄弟元素
Html 代码如下：
<br />
在我的后面追加一条新闻<br />
Javascript代码如下：
<br />
jQuery(function(){<br />
//在元素内部追加内容<br />
$("#content").append("<p>姚明退役了...");<br />
})<br />
</p>
在#content中添加元素，这是放
姚明退役...
作为子元素添加到#content。如果要在元素外添加元素，需要使用after，这样就可以把
姚明退役...
附加到#content 作为同级元素
Javascript代码如下：
<br />
jQuery(function(){<br />
//将span添加到追加到content1的后面<br />
$("#content").after("<p>姚明退役了...");<br />
})<br />
</p>
二、在元素的不同位置添加内容
Html 代码如下：
<br />
窗前明月光<br />
<br />
疑是地上霜
Javascript代码如下：
<br />
jQuery(function(){<br />
//将span添加到追加到content1的后面<br />
$("span").appendTo("#content1");<br />
})<br />
三、在元素开头添加内容
Html 代码如下：
<br />
<br />
在我的后面追加一条新闻<br />
Javascript代码如下：
<br />
jQuery(function(){<br />
//在元素的开始位置追加内容<br />
$("#content").prepend("<p>头部");<br />
})<br />
</p>
四、在不同元素的开头添加内容
Html 代码如下：
<br />
在我的后面追加一条新闻<br />
<br />
疑是地上霜
Javascript代码如下：
<br />
jQuery(function(){<br />
//在不同元素的开始位置追加内容<br />
$("span").prependTo("#content");<br />
})<br />
向#content 添加一个元素。这是为了将疑似地面霜作为子元素添加到#content 的开头。如果要在元素外添加起始元素，需要使用before，这样可以将疑似地霜作为兄弟元素附加到#content started
代码如下：
<br />
jQuery(function(){<br />
//在不同元素的开始位置追加内容<br />
$("span").before("#content");<br />
})<br />
五、收录具有指定结构元素的元素
变形(html)
在指定的html中指定html元素，但指定的元素不能收录兄弟元素，否则无法正常运行，不收录通用文本字符串。以下代码使用 div 标签来收录 p 标签
html代码如下：
<br />
将我包含在div中<br />
javascript代码如下：
<br />
jQuery(function(){<br />
$("span").wrap("<b>");
})<br />
六、收录多个具有指定元素的html元素
warpAll(html)
html代码如下：
<br />
p内容<br />
p内容<br />
p内容<br />
javascript代码如下：
<br />
jQuery(function(){<br />
$("p").wrapAll("
");<br />
})<br />
七、收录指定标签的子元素
wrapInner(html)
和warp方法一样，在html中指定html元素，例如：
使用b标签在p标签中收录文本的代码如下：
html代码如下：
将p标签的文字用b标签包含起来<br />
也将p标签的文字用b标签包含起来
javascript代码如下：
<br />
jQuery(function(){<br />
$("p").wrapInner("<b>");<br />
})<br />
