41 lines
1.2 KiB
HTML
41 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>createElement</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
|
h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
#container { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #f9fafb; }
|
|
p { margin: 6px 0; padding: 6px 10px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; }
|
|
p.highlight {
|
|
background: #fef3c7;
|
|
border-color: #ca8a04;
|
|
color: #713f12;
|
|
font-weight: 600;
|
|
animation: pulse 1.2s ease-in-out infinite;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
background: #16a34a;
|
|
color: #fff;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-left: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h3>#container nach appendChild</h3>
|
|
<div id="container">
|
|
<p>Erster Absatz</p>
|
|
<p>Zweiter Absatz</p>
|
|
<p class="highlight">Ich bin neu!<span class="badge">createElement</span></p>
|
|
</div>
|
|
</body>
|
|
</html>
|