忍者ブログ

からすまる日誌 JavaScript

基本(13) appendChild

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

基本(13) appendChild

HTMLにおいて、どこにも書いていない要素をjsで作り出すことができる。
 
document.createElement('p');
 
var ele = document.createElement('p');

appendChild(アペンドチャイルド)
 
親要素.appendChild (子要素)
 
>appendChildは、特定の親要素の中に要素を追加するためのメソッドです。
 
要素を指定し、その要素の子要素として、HTMLタグを追加することができます。
追加される場所は、親要素の末尾です。
つまり指定した要素の閉じタグの直前ですね。
 

>innerHTMLとは?
HTML要素の中身を変更するためのプロパティ。
要素の中身を取得したり変更したりする事ができる
 
  
 
--->test2.html
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<link rel="stylesheet" href="test2.css">
</head>
<body>
<ul id="hoge"></ul>
<script src="test2.js"></script>
</body>
 
</html>
  
--->test2.js
 
var ul1 = document.getElementById('hoge');//divに書き出す部分の親要素
//子要素
var i;//ループカウンタ
for (i=0; i<20; i++){
 var ele = document.createElement('li');//p要素をオブジェクトとして新規に生成する、
 ele.innerHTML ='hogehoge';//オブジェクトeleのプロパティにhogehoge
 ul1.appendChild(ele);
}
 
--->
  
 
>getElementByIdは、任意のHTMLタグで指定したIDにマッチする
ドキュメント要素を取得するメソッドです。
  
引数としてIDであるStringオブジェクトを要し、戻り値は取得した要素です。任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数です。
  
基本的にIDはドキュメント内で重複してはならないので、getElementByIdによって取得される要素は一つです。
 

margin(マージン)外側
padding(パディング)内側 詰め物のこと
 
横幅=文字が表示できる領域
プラスでつめものが入ると超過してしまう。
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R