2024-08-15 14:38:20 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
2024-08-16 14:01:43 +02:00
|
|
|
let count = 0;
|
|
|
|
|
|
|
|
|
|
add('green', 500, "Det", 'span');
|
|
|
|
|
add('red', 250, "var", 'div');
|
|
|
|
|
add('blue', 600, "en", 'div');
|
2024-08-15 14:38:20 +02:00
|
|
|
add('rgb(200, 200, 42)', 500, "gang", 'span');
|
|
|
|
|
|
|
|
|
|
function add(color, size, word, tagName) {
|
2024-08-16 14:01:43 +02:00
|
|
|
count++;
|
2024-08-15 14:38:20 +02:00
|
|
|
let existingHtml = document.getElementById('app').innerHTML;
|
|
|
|
|
let newHtml = /*HTML*/ `
|
2024-08-16 14:01:43 +02:00
|
|
|
<${tagName} style="color:${color}; font-size: ${size}%;">
|
|
|
|
|
${word}
|
|
|
|
|
${count}
|
|
|
|
|
</${tagName}>
|
2024-08-15 14:38:20 +02:00
|
|
|
`;
|
|
|
|
|
document.getElementById('app').innerHTML = existingHtml + newHtml ;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
