javascript for繰り返し構文 appenChild にてHTMLに追加する

JavaScriptにて配列の要素をHTML内に表示する方法について書き留めます。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>javascript for繰り返し構文 appenChild にてHTMLに追加する</title>
<style>
.sukinakudamono {
font-size: 14px;
font-family: Arial, verdana;
width: 200px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ff2200;
border-radius: 15px;
}

.sukinakudamono li {
list-style: none;
}
</style>
</head>

<body>
<p id="sukinakudamono"></p>
<script>
var results = ["りんご", "ぶどう", "なし"];
for (var i = 0; i < results.length; i++) {
var object = results[i];
var text = document.createTextNode(object);
var k = document.getElementById('sukinakudamono');
var ul = document.createElement('ul');
var li = document.createElement('li');
k.appendChild(ul).appendChild(li).appendChild(text);
k.className = 'sukinakudamono';
}
</script>
</body>

</html>

表示はこのようになります。

投稿者: Bob

大阪市西成区玉出にて1998年以来20年間に渡りパソコン教室を運営しています。

コメントを残す