JavaScriptで既存のtr要素の中にthを追加したい

Question

実現したいこと

干渉できないHTMLの中にあるtableに項目＜th＞を追加したいです。

前提

Bcartというカートシステムを使い、干渉できないHTMLのページをカスタマイズしています。
知識のない状態から独学で行っている状況です。
直接htmlを触れないため、JavaScriptを使っています。
jqueryでも構わないのですが、方法が見つけられませんでした。

内容

thead要素の中に既にある＜tr＞の中に＜th＞を追加したいのですが、作成したJavaScriptを起動させると、既存＜/tr＞の下に新しく＜tr＞と＜th＞が生成されてしまいます。
→HTMLソースの11行目
どうすれば既存<th class="__order" id="th-3">必要数</th>の直下に＜th＞が追加できるのでしょうか？
→HTMLソースの9～10行目の間
知識と理解不足で申し訳ないのですが、お力添えをいただけますと大変嬉しいです。
どうぞ、よろしくお願いいたします。

該当のソースコード

■作成したJavaScriptを適応させた後のhtmlソース

<table id="tab-1">
    <thead id="p-thead">
        <tr>
            <th class="__description" id="th-1">品番 / 品名 色 サイズ</th>
            <th class="__price">
                <div class="__total">販売価格</div>
                <div class="__detail">（単価 × 入数）</div>
            </th>
            <th class="__order" id="th-3">必要数</th>
        </tr>
           <tr><th>セル</th></tr>
    </thead>
    <tbody>
        <tr class="__item __item--1  ">
               <td class="__description">
                    <h2 class="__name">
                 ABS_BK_D00200-1000　/　ABS 黒 φ10×L1000 </h2>
    
                   <div class="__spec"></div>
                </td>
                <td class="__price">
                   <div class="__heading">
                   <div class="__total">販売価格</div>
                   <div class="__detail">（単価 × 入数）</div>
                    <div class="__body">
                    <div class="__total"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></div>
                    <div class="__detail">
                    （<span class="__unit-price"><span class="c-tax-price __tax-price __is-none">1,100,000円</span></span> × <span class="__quantity">1</span><span class="__unit"></span>）</div>
                  </td>
                <td class="__order">
                     <div class="__error c-alert c-alert--danger __js-add-cart-error" style="display: none;"></div>
                     <div class="__heading">注文数</div>
                     <div class="__body">
                        <div class="__input">
                     <input placeholder="0" class="__js-order-count __js-disabled-enter-key" name="p[1]" type="number"><span class="__spin p-spin"><span class="__minus __js-spin"></span><span class="__plus __js-spin"></span></span></div>
                     <dl class="__cart-count __js-cart-count" style="display: none;">
                         <dt>追加済</dt>
                         <dd>0</dd>
                    </dl>
                        <div class="__notice">
                            <dl class="__min-max-order">
                            <dt>注文可能数</dt>
                            <dd class="__min">
                            <span class="__title">最小</span>
                            <span class="__count">1</span>
                            </dd>
                    </dl>

                </td>
         </tr>
    </tbody>
</table>

■作成したJavaScriptソース

// thead要素を取得
var theadElem = document.getElementById('p-thead');
// thead要素にtr要素（行）
var trElem = theadElem.insertRow();
// th要素をtr要素に追加
trElem.appendChild(cellElem);

修正内容と現在の状況

■現在のHTML状況

<thead id="p-thead">
            <tr>
                <th class="__description" id="th-1">品番 / 品名 色 サイズ</th>
                <th class="__price">
                    <div class="__total">販売価格</div>
                    <div class="__detail">（単価 × 入数）</div>
                </th>
                <th class="__order" id="th-3">必要数</th>undefined
            </tr>
        </thead>

■適応したJavaScript

// thead要素を取得
var theadElem = document.getElementById('p-thead');
// th要素を追加
var cellElem = document.querySelector('#th-3').after(cellElem);
// th要素にテキストを追加
cellElem.appendChild(document.createTextNode('セル'));
// th要素をtr要素に追加
trElem.appendChild(cellElem);

Answer 1

既存の<tr>に追加したいのに insertRow() (新たな<tr>を挿入する)はおかしいですね。

const cellElem = document.createElement('th');
cellElem.textContent = 'セル';
document.querySelector('#th-3').after(cellElem);

または

document.querySelector('#th-3').insertAdjacentHTML('afterend', '<th>セル</th>');

などでいいのではないでしょうか。

Comments

[helpmee88]

早々にご回答いただきましてありがとうございます！
insertRow()の使い方を理解できておりませんでした。
ありがとうございます。
ご教授いただいた内容で適応してみたのですが、正しい適応方法がが分からず、未定義エラーがでてしまい、それを正すために定義をし直すことを繰り返し、現在は「appendChild」の未定義エラーを直すことができず煮詰まってしまいました。
HTMLには、<th>タグは挿入されずに「undefined」が表示されている状態です。
教えていただいた上で大変恐縮ですが、下記のjsの間違いをご指摘いただけませんでしょうか？
お手を煩わせてしまい申し訳ございません。
どうぞ、よろしくお願いいたします。

■現在のHTML状況
```html
<thead id="p-thead">
<tr>
<th class="__description" id="th-1">品番 / 品名 色 サイズ</th>
<th class="__price">
<div class="__total">販売価格</div>
<div class="__detail">（単価 × 入数）</div>
</th>
<th class="__order" id="th-3">必要数</th>undefined
</tr>
</thead>
```
■適応したJavaScript
```js
// thead要素を取得
var theadElem = document.getElementById('p-thead');
// th要素を追加
var cellElem = document.querySelector('#th-3').after(cellElem);
// th要素にテキストを追加
cellElem.appendChild(document.createTextNode('セル'));
// th要素をtr要素に追加
trElem.appendChild(cellElem);
```

[int32_t]

<th> を作る処理はできていて挿入するところだけが問題なのかと勘違いしてました。

const cellElem = document.createElement('th');
cellElem.textContent = 'セル';
document.querySelector('#th-3').after(cellElem);

こんな感じだと思います。

[int32_t]

document.querySelector('#th-3').insertAdjacentHTML('afterend', '<th>セル</th>');

の1行でもできますね。

[helpmee88]

お忙しい中、早急ににご回答いただきましてありがとうございます。
素早い回答に感動いたしました！
ご教授いただいた内容で適応したところ、希望していたようにセルを挿入することができました。
大変勉強になり、助かりました。
これから、教えていただいたソースを調べながらひとつひとつ理解させていただきます。
本当に、ありがとうございました。