jQuery - 添加元素

过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

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

实例

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例

functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 标签创建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 创建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素vartxt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML标签规范

尽管目前浏览器都兼容HTML，但是，使网页能够符合标准，应该尽量使用XHTML规范来编写代码，需要注意以下事项：

（1）在XHTML中，标签名必须小写。在HTML中，标签名称可以大写，也可以小写。

（2）在XHTML中，属性名称必须小写。在HTML中，属性名称也必须是小写的。

（3）在XHTML中，标签必须严格嵌套；HTML对标签的嵌套没有严格的规定。

（4）在XHTML中，标签必须封闭；在HTML规范中，标签不闭合也是正确的，即标签可以不成对出现。例如，“<p>我没有结束标签”和“<p>我有开始标签和结束标签</p >”，这两条代码的显示效果，在HTML规范中是完全相同的，但是，在XHTML中，第一条语句是不允许的(不能正常显示)，必须像第二条语句那样，严格地使标签闭合。

（5）在XHTML中，即使是空元素的标签也必须封闭，这里说的空标签，就是指那些<img>、<br>、<hr>等不对称的标签，它们也必须闭合，即写作<img>、<br>、<hr/>；而在HTML.规范中，这类标签可以不封闭。例如，在HTML中书写为<img>或<img/>均是正确的，但在XHTML规范中，必须写为<img/>才正确。

（6）在XHTML中，属性值必须用双引号括起来；在HTML中，属性可以不必使用双引号。

（7）在XHTML中，属性值必须使用完整形式；在HTML中，一些属性经常使用简写方式设定属性值。例如：

而在XHTML中，必须完整地写做：

(8)在XHTML中，应该区分“内容标签”与“结构标签”。例如，<p>标签是一个内容标签，而<table>标签是结构标签，因此，不允许将<table>标签置于<p>标签内部。反之，如果将<p>标签置于<td>…</td>之间，则是完全正确的。

（9)在XHTML中，必须添加文档类型声明<！DOCTYPE>。该标签用于描述HTML的版本和文档类型声明，进行了相应的版本和文档类型声明之后，才能保证这是一个XHTML网页，从而让浏览器以相应的规范来解析网页，使网页正常显示。

雨青工作站发文地址：js html input file 类型实现图片上传-白雨青工作站

js html input file 类型实现图片上传

这里只单独讲如何用JS 把选中的文件转成base64 ，然后输出到前台显示

直接上代码：

AddArticle.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>写文章-白雨青工作站</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws">
	<meta name="description" content="小说,我有一剑,Java,HTML,Java小工具,白雨青工作站,http://www.byqws.com:8080/byqws/">
	<!---->
	
	<link rel="shortcut icon" href="img/byqws-apple-touch-icon-16X16.png" />
	<link rel="apple-touch-icon" href="img/byqws-apple-touch-icon-57X57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="img/byqws-apple-touch-icon-72X72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="img/byqws-apple-touch-icon-144X144.png" />
	
	<link rel="stylesheet" type="text/css" href="Background/css/addArticle.css">
	
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
	
	
	<script src="Background/js/tinymce/tinymce.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="Background/js/tinymce/langs/zh-Hans.js" type="text/javascript" charset="utf-8"></script> <!--汉化-->
	
	<script type="text/javascript" src="Background/js/AddArticle.js"></script>
	<script type="text/javascript" src="Background/js/mytinymce.js"></script>
	<script type="text/javascript" src="Background/js/uploadImg.js"></script>
	
  </head>
  
  <body>
  <div class='main'>
	<div class='title'>
		<label >添加一篇文章</label>
	</div>
	
	
	
	<div class='FTitle_div'>
		<input id="FTitle" class='FTitle' placeholder = '请输入标题'></input>
	</div>
	
	<div class='FAbstract_div'>
		<input id="FAbstract" class='FAbstract' placeholder = '请输入摘要'></input>
	</div>
	<div class='content_div'>
		<textarea id="content" class='content'></textarea>
	</div>
	<div class="FCover">封面图片</div>
	<div class="upload-piclist">
		
       	<div class="upload-file">
           <input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>
       	</div>
    </div>
	<input id="submitbutton" class='submitbutton' type = 'button' value = '提交'></input>
</div>
  </body>
</html>

引入转base64后前台显示JS文件

uploadImg.js

let picmax = 20; //限制上传数量 
function imgChange() {
	let file = document.getElementById('file').files;
	let imglist = document.querySelectorAll('.upload-Picitem');
	let piclist = document.getElementsByClassName('upload-piclist')[0];
	let filelist = file.length + imglist.length > picmax ? 9 - imglist.length : file.length + imglist.length;
	if (file.length + imglist.length >= 9) {
		let uploadfile = document.getElementsByClassName('upload-file')[0]
		uploadfile.style.display = "none"
	}
	for (let i = 0; i < filelist; i++) {
		readerfile(file[i]).then(e => {
			let html = document.createElement('div');
			html.className = 'upload-Picitem'
			html.innerHTML = '<img src=' + e + ' alt="pic">'
			piclist.appendChild(html);
		})
	}
}

function readerfile(file) {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		reader.addEventListener("load", function() {
			resolve(reader.result);
		}, false)
		if (file) {
			reader.readAsDataURL(file)
		}
	})
}

//提交
function submit() {
	let imglist = []
	//let text = document.getElementsByClassName('upload-textarea')[0].value
	let piclist = document.querySelectorAll('.upload-Picitem');
	for (let i = 0; i < piclist.length; i++) {
		imglist.push(piclist[i].lastChild.src)
	}
	//console.log("发布内容：", text)
	console.log("图片列表：", imglist)
}

直接看结果

在线咨询

上一篇：HTML+CSS web前端开发文本物理属性demo应用加粗行间距
下一篇：html5小游戏源代码程序设计html源码网页电子版资料素材

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery - 添加元素

您的项目需求