JavaScript HTMLを生成して追加させたい

Question

コードだけですみませんが、JSでのDOM操作で詰まっています。
panel-bodyに対して子要素としてhtmlを追加していくという理論はわかっているのですがコードがわからずこちらで質問させていただきました。

<div class="panel panel-default" >
	<div class="panel-heading">
		<div class="panel-title text-center">Please sign in</div>
	</div>
	<div class="panel-body" >
	<!-- ここから -->
		<div class="alert alert-danger">
			<strong>Error</strong>
			<p>あいうえお</p>
		</div>
	<!-- ここまでは無いものとしてJSで追加したい。 -->
		<form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST" >
			<div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
				<input id="user" type="text" class="form-control" name="username" placeholder="UserName or E-mamil" value="<?php echo $input['username']?>">
			</div>
			<div class="input-group">
				<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
				<input id="password" type="password" class="form-control" name="password" placeholder="Password" value="<?php echo $input['password']?>">
			</div>
			<div class="form-group">
				<!-- Button -->
				<div class="col-sm-12 controls">
					<button type="submit" href="#" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-log-in"></i> Log in</button>
				</div>
			</div>
		</form>
	</div>
</div>

Comments

[defghi1977]

https://teratail.com/help/avoid-asking

Answer 1

例えばこんな.

document.querySelector(".alert.alert-danger").remove();
document.querySelector(".panel-body")
  .insertAdjacentHTML("afterbegin", "<div>replaced</div>");

Answer 2

Bootstrapを使ってそうなのでjQueryで書いてみました。

var alert = $('<div>')
              .addClass('alert alert-danger')
              .append('<strong>Error</strong>')
              .append('<p>あいうえお</p>');
$('.panel-body').prepend(alert);