top / index / prev / next / target / source

2016-12-12 diary: [JavaScript] innerHTML にテキストHTMLを突っ込む際の使い方メモ

いがぴょんの日記 日記形式でつづる いがぴょんコラム ウェブページです。

[JavaScript] innerHTML にテキストHTMLを突っ込む際の使い方メモ

毎回忘れがちな innerHTML にテキストの HTML を突っ込んで DOM ツリー化する手順をメモ。

    var newdiv = document.createElement("div");
    newdiv.innerHTML = "<p>Hello innerHTML world.</p>";
    document.getElementById("targetnode").appendChild(newdiv.firstChild);

フルコード

これを HTML に組み込む際の方法もメモ。無名関数で即時関数する方法も書き方をよく忘れるのでこれも備忘を兼ねます。

<html>
<head>
  <title>Simple innerHTML sample.</title>
</head>
<body>
  <h1>Simple innerHTML sample</h1>
  <div id="targetnode" />

  <script type="text/javascript">
  (function(){
    var newdiv = document.createElement("div");
    newdiv.innerHTML = "<p>Hello innerHTML world.</p>";
    document.getElementById("targetnode").appendChild(newdiv.firstChild);
    })();
  </script>
</body>
</html>

登場キーワード

この日記について