文章目录

jquery使用before、after、append、prepend添加插入元素内容

jquery使用before、after、append、prepend在元素前后内外插入内容

最近在做一个项目的时候,遇到这样一个功能:

当用户回复后,自动在当前元素内的前面插入最新回复。

想当然的就用before了,没想到的是内容插入元素的外面去了。

后来又去查文档才搞定,其实使用jquery插入内容或元素这些以前就操作过很多次,但老是忘记。

今天就写出来,给自己增加印象,也给小伙伴们一个参考。

jQuery添加元素的方法

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

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

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

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

添加元素方法图示

DEMO

html代码<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>jquery使用before、after、append、prepend在元素前后内外插入内容</title>
</head>
<style>
	.mainbox {width: 60%;margin: 0 auto;}
	#content {background: #f2f2f2;padding: 20px;text-align: center;}
	.groupbtn {margin-top: 20px;}
	p {color: #f00;font-weight: bold;}
</style>

<body>
    <h1>jquery使用before、after、append、prepend在元素前后内外插入内容</h1>
    <div class="mainbox">
    <div id="content">
		<div class="text">我是内容一</div>
    </div>
    <div class="groupbtn">
        <input type="button" value="在content前面插入元素(外部)" />
        <input type="button" value="在content后面插入元素(外部)" />
        <input type="button" value="在text前面插入元素(内部)" />
        <input type="button" value="在text后面插入元素(内容)" />
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
		var $mainbox = $('#content');
		var btns = $('input[type="button"]');
		btns.on('click', function () {
		  var index = $(this).index(); //获取点击元素的索引
		  var val='<p>'+$(this).val()+'</p>';
		  switch (index) {
			case 0:
			  // 在content前面插入元素(外部)
			  $mainbox.before(val)
			  break;
			case 1:
			  // 在content后面插入元素(外部)
			  $mainbox.after(val)
			  break;
			case 2:
			  // 在text前面插入元素(内部)
			  $mainbox.prepend(val); //父元素添加子元素
			  // $ele3.prependTo($mainbox)   //子元素加入到父元素中
			  break;
			case 3:
			  // 在text后面插入元素(内容)
			  $mainbox.append(val)
			  // $ele3.appendTo($mainbox)   //子元素加入到父元素中
			  break;
		  }
		})
    </script>
</body>
</html>

查看实例

本文网址:http://www.santii.com/article/231.html

数据更新时间:2019-09-18