Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@yomogenium

Javascriptでhtml要素の順番を入れ替える。

はじめに

ちゃんとした説明を一度書いてみようと思った。

実際の動き

Jsのコマンドに、appendChildinsertBeforeというヤツらが存在する。
この2つは、特定の要素を最後尾、または要素の前に挿入する関数なのだが……

さて、問題である。既に存在する要素を再び追加すると何が起きるのだろうか。

ちなみに、初期状態はこちら。
1582104043515.jpg

なお、正しい順番は以下のものとなる。
DG-4BA_UAAAGvIL.jpg

HTMLそのもののソースはこちら。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>無題</title>
</head>
<body>

<style>
#pipimi{
    border: 2px solid black;
    padding: 10px 20px;
    margin: 0;
    max-width: 200px;
}
#pipimi p{
    font-family: serif;
    margin: 0 0 0.5em 0;
}
</style>

<div id="pipimi">
    <p>なんとも低い</p>
    <p>クオリティ</p>
    <p>まあひどい</p>
</div>

<script type="text/javascript">
var tag = document.getElementById('pipimi');
var taglist = tag.getElementsByTagName('p');

var p01 = taglist[0]; // なんとも低い
var p02 = taglist[1]; // クオリティ
var p03 = taglist[2]; // まあひどい

</script>
</body>
</html>

scriptを以下のように変えてやると……

html

<script type="text/javascript">
var tag = document.getElementById('pipimi');
var taglist = tag.getElementsByTagName('p');

var p01 = taglist[0]; // なんとも低い
var p02 = taglist[1]; // クオリティ
var p03 = taglist[2]; // まあひどい

tag.appendChild(p02);

</script>

こうなる。

1582104656370.jpg

そう、既に存在する要素を「追加」すると、元の位置からは消えて、新しい位置に追加される。つまり移動するのだ。
同じ要領で、insertBeforeのほうもためしてみよう。

html

<script type="text/javascript">
var tag = document.getElementById('pipimi');
var taglist = tag.getElementsByTagName('p');

var p01 = taglist[0]; // なんとも低い
var p02 = taglist[1]; // クオリティ
var p03 = taglist[2]; // まあひどい

tag.appendChild(p02);

tag.insertBefore(p03, p01);

</script>

結果はこのとおり。完成である。
1582105232515.jpg

おわりに

不明な点などありましたら編集リクエストおねがいします。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yomogenium
おしごとのためにつかっています、まる。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?