javascript dom読み込みタイミング

html

<html>
<head>
  <title>JavaScript Sample</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta name="viewport" content="width=device-width">

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- JS -->
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
  <script src="js/app.js" type="text/javascript"></script>
</head>

<body>
  <div class="hello"> // ここにjqueryでdom追加
  </div>
</body>
</html>

js

$(function(){
  addHello($('.hello')); // domを読み込んでから実行
})

function addHello($div){
  $div.append($('<div>').text("hello"))
}

注意

// $(function(){ の中で、実行しないと、domを読み込みが完了していないため処理が正常に終了しない
addHello($('.hello'));

function addHello($div){
  $div.append($('<div>').text("hello"))
}