脱jQuery $(”＜div class=’hello’＞Hello＜/div＞”)

$("<div>")

まずは一番簡単なパターンからです。

jQuery の場合は $("<div />") も $("<div></div>") も同じく div 要素を作ることが出来ます。同じものだと考えてください。

jQuery

$("<div>")

書き換え JavaScript

document.createElement("div")

.creaeElement が「要素を作る」の命令です。.createElement("a") であれば「a 要素」、.createElement("span") であれば「span 要素」を作ります。

$("<div class='menu'>")

class を指定する場合です。menu という class 付きの div を作ります。

jQuery

$("<div class='menu'>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.className = "menu";

class を付ける場合は、まず変数をおき（ここでは myDiv）、その変数に .className という命令で class を付与します。「.class」 ではなく「.className」ということに注意してください。

$("<div id='main'>")

id 付きの div を作ってみます。

jQuery

$("<div id='main'>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.id = "main";

id を付ける場合は、同様に変数をおき、その変数に .id で付与します。

ほかに下記を同じ書式で付与することが出来ます。

myTag.href = "https://q-az.net"; //「href」を付与
myTag.target = "_blank"; //「target」を付与
myTag.name = "main"; //「name」を付与
myTag.src = "/img.png"; //「src」を付与

他にもあるかもしれませんが、よく使われるものはこの辺だと思います。 ただし、何でもかんでも 「.○○」の形で付与できるわけではなく、一部の属性や独自の属性を付与する場合は別の方法でやらなくてはいけません。

$("<div onclick='○○'>")

onclick属性を付与したい場合は .onclick では上手く行きません。

jQuery

$("<div onclick='○○'>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.setAttribute("onclick", "○○");

.setAttribute が属性を与える命令です。これであれば独自の属性も付与することが出来ます。

myTag.setAttribute("data-x", "○○"); //「data-x」属性を付与

「.○○」で付与できない属性は .setAttribute を使うことで付与できます。

style 属性の付与に関しては .css() で解説するので後述となります。

$("<div class='hello'>Hello</div>")

次はタグの中にテキスト文字列が入っている場合です。

jQuery

$("<div class='hello'>Hello</div>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.className = "hello";
myDiv.textContent = "Hello";

.textContent はテキスト文字列を設定する命令でした。それを用いて「Hello」を中に入れます。

参考：.textContent について

$("<div id='menu'><ul><li>メニューその1</li><li>メニューその2</li></ul><div class='menufooter'>フッター</div></div>")

タイトルが長くなってしまいましたが、最後は複雑な要素を作り出す場合です。下記のような HTML を作りたい場合です。

HTML

<div id="menu">
    <ul>
        <li>メニューその1</li>
        <li>メニューその2</li>
    </ul>
    <div class="menufooter">フッター</div>
</div>

下記の方法で書き換えます。

jQuery

$("<div id='menu'><ul><li>メニューその1</li><li>メニューその2</li></ul><div class='menufooter'>フッター</div></div>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.id = "menu";
myDiv.innerHTML = "<ul><li>メニューその1</li><li>メニューその2</li></ul><div class='menufooter'>フッター</div>";

.innerHTML はHTML文字列を設定するものです。まず外側の div をつくり、中に .innerHTML で入れる。他にもいろいろな作り方がありますが、複雑な場合はこれが一番簡単だと思われます。

参考：.innerHTML について

複雑な要素の作り方

① 一番外側の要素を .createElement 作成。class、id等の属性を付与。
② 内側の要素全てを .innerHTML で中に入れる。

です。

$("#main").before("<div class='hello'>Hello</div>")

最後に具体例を書きます。 前回紹介した .before() の場合です。

jQuery

$("#main").before("<div class='hello'>Hello</div>")

書き換え JavaScript

var myDiv = document.createElement("div");
myDiv.className = "hello";
myDiv.textContent = "Hello";
var myMain = document.getElementById("main");
myMain.parentNode.insertBefore(myDiv,myMain);

myDiv は <div class='hello'>Hello</div> でそれを myMain の前に入れます。jQuery より大分長くなってしまいますが基本はかわりません。

まとめ