jquery實現的如何在div的外部後面新增元素
為指定的元素新增其他的元素是常見的操作,比如在元素的內部的結尾追加一個元素可以使用appen()函式。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:150px; height:100px; background:red; } #new{ width:50px; height:50px; background:green; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").append($("<div id='new'></div>")) }) </script> </head> <body> <div id="box"></div> </body> </html>
上面的程式碼可以將新div追加到元素的內部的尾部,我們想將div新增的div的外部的尾部。
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #box{ width:150px; height:100px; background:red; } #new{ width:50px; height:50px; background:green; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#box").after($("<div id='new'></div>")) }) </script> </head> <body> <div id="box"></div> </body> </html>
上面的程式碼實現了我們的要求,可以將新的div新增的原來div的外部的尾部。
相關文章
- jquery如何在元素的開頭新增新的元素jQuery
- jQuery獲取li元素後面所有兄弟元素jQuery
- jquery如何在li元素列表的開頭新增一個新li元素jQuery
- jQuery 新增元素jQuery
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- jquery如何在元素內追加新的元素jQuery
- drag & resize元素的jQuery實現jQuery
- jQuery隱藏一個div元素jQuery
- jquery 新增html元素後 html中click失效問題jQueryHTML
- jQuery動態設定div元素的尺寸jQuery
- 如何利用jquery在任意指定li元素後面插入新的li元素jQuery
- js如何在元素的開頭新增新的元素JS
- jQuery實現的元素延遲指定時間之後隱藏jQuery
- 利用jquery設定div元素的透明度jQuery
- 利用jQuery在指定元素中新增html元素jQueryHTML
- jQuery實現的元素抖動外掛jQuery
- jQuery實現的多列元素高度相等jQuery
- jquery為動態新增元素新增事件薦jQuery事件
- jquery實現的點選頁面動畫方式平滑定位到某元素程式碼jQuery動畫
- jQuery點選按鈕刪除div元素jQuery
- JavaScript動態新增和刪除div元素JavaScript
- jquery給元素新增樣式表的方法jQuery
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- jQuery實現的具有淡出效果的元素刪除jQuery
- jQuery實現的div垂直水平居中例項程式碼jQuery
- Jquery實現滑鼠拖動改變div高度jQuery
- jquery實現的獲取指定元素指定型別元素數目jQuery型別
- jQuery動態設定div元素的高度和寬度jQuery
- jquery 為動態新增的元素繫結事件jQuery事件
- jQuery為元素新增和刪除classjQuery
- jQuery如何新增和刪除元素jQuery
- JavaScript在指定元素後面插入元素JavaScript
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- jQuery實現對陣列元素的轉換效果jQuery陣列
- jQuery Mobile頁面跳轉後未載入外部JS原因分析及解決jQueryJS
- jQuery實現的div在視窗中垂直水平居中效果jQuery
- jQuery 判斷頁面元素是否存在jQuery
- js如何動態在div中新增一個新的元素JS