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 - 添加元素

您的項目需求