js
1td.textContent = '◎';
2td.classList.add ('valid');
3td.style.border = '1px solid blue';
4//divを追加するとエラーが起きてしまう。
5td.createElement('div');
6td.style.color = '#fd5c63';
7td.style.backgroundColor = 'white';

実現したいこと

javascriptでhtmlを生成する練習をしています。
その一環で、tableをjavascriotでなんとか追加するところまではできました。

実現したいこと

tdの中の文字をcssでカスタマイズしたいので、javascriptでdivもしくはspanタグを追加したい。

困っていること

下記のようにcreateElementとしたのですがうまくできませんでした。。。

js
1//divを追加するとエラーが起きてしまう。
2td.createElement('div');

m.ts10806

2019/07/05 22:23

「うまくいかない」は他者になにも伝わらない表現なので、起きた現象やエラーなど確認して具体的に記載してください

行動規範の内容に同意します

回答3件

createElementはdocumentにあって、タグから呼べるものではありません。

document.createElementでタグを生成して、親要素.insertBeforeで挿入する、という流れです。

投稿2019/07/05 22:20

maisumakun

総合スコア145201

rails_ruby

2019/07/05 22:24

ご教示いただきありがとうございます。そうなんですね。勉強になりました。ちなみに、tdの中に追加できるタグでdivやspanなどは追加する事は出来ますでしょうか？

行動規範の内容に同意します

ベストアンサー

こんな感じ？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  [].forEach.call(document.querySelectorAll('#t1 td'),function(td){
4    td.textContent = '◎';
5    td.classList.add ('valid');
6    td.style.border = '1px solid blue';
7    var div=document.createElement('div');
8    div.style.color = '#fd5c63';
9    div.style.backgroundColor = 'white';
10    div.textContent='test';
11    td.appendChild(div);
12  });
13});
14</script>
15<table id="t1">
16<tbody>
17<tr><td></td><td></td><td></td></tr>
18<tr><td></td><td></td><td></td></tr>
19<tr><td></td><td></td><td></td></tr>
20</tbody>
21</table>