JQuery（12）_JQuery 中的 DOM 操作之外部插入节点

最新推荐文章于 2021-01-20 17:51:34 发布

魏宇轩

最新推荐文章于 2021-01-20 17:51:34 发布

阅读量419

点赞数

分类专栏： JQuery（更新完）文章标签： JQuery

本文链接：https://blog.csdn.net/qq_36260974/article/details/103520421

版权

JQuery（更新完）专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本系列博客汇总在这里：JQuery 汇总

JQuery 中的 DOM 操作之外部插入节点

一、外部插入节点
- 1、after(content)
- 2、before(content)
二、代码演示

一、外部插入节点

1、after(content)

在每个匹配的元素之后插入内容。

2、before(content)

在每个匹配的元素之前插入内容。

以上方法不但能将新创建的 DOM 元素插入到文档中，也能对原有的 DOM 元素进行移动。

二、代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function valid()
{
	var tip = $("<font color='red'>用户名已经存在</font>");
	$("#username").after(tip);
	//$("#username").before(tip);
	//$("#username").insertBefore($("#password"));
}
</script>
<style type="text/css">
select
{
	width: 200px;
	height: 200px;
}
</style>
</head>
<body>
<table>
	<tr>
		<td>
			用户：<input id="username" name="usename" type="text" value="0">
		</td>
		<td>
			密码：<input id="password" name="password" type="password">
		</td>
	</tr>
</table>
<input type="button" value="点击" onclick="valid()"><br>
</body>
</html>