js で要素を動的に作成するには 3 つの方法があることがわかっています。要素は jQuery でも動的に作成できます
例:
1 2 | var str = $( "<a href='http://www.jb51.net'>脚本之家</a>" );
$( "ul" ).append(str);
|
ログイン後にコピー
ノードを追加する
js でノードを追加するメソッドは、appendChild (node 要素) です。そして insertBefor (node 要素) 、position)、jQuery では、親要素の最後の子ノードの後に追加される
append 親要素の最初の子ノードの前に挿入される prepend
after の後に追加されます要素、兄弟
要素の前 同じレベルの前に追加
次のコードは、ノードの追加の良い例になります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
<script src= "jquery-1.12.2.js" ></script>
<script>
$( function () {
var p1 = $( "p" );
$( "#btn1" ).click( function () {
$( "div" ).append(p1);
});
$( "#btn2" ).click( function () {
$( "div" ).prepend(p1);
});
$( "#btn3" ).click( function () {
$( "div" ).after(p1);
});
$( "#btn4" ).click( function () {
$( "div" ).before(p1);
});
});
</script>
</head>
<body>
<input type= "button" id= "btn1" value= "btnAppend" />
<input type= "button" id= "btn2" value= "btnPrepend" />
<input type= "button" id= "btn3" value= "btnAfter" />
<input type= "button" id= "btn4" value= "btnBefore" />
<div>div标签1</div>
<p>我要插队。。。</p>
</body>
</html>
|
ログイン後にコピー