I have a table in html and I need help please with insert text using js
- With putting a TEXT under the Price
- At the moment I only managed to get my text under IMAGE but I would like help to put it under the PRICE.
- Under $us21.00
let text = document.querySelector(".product");
text.insertAdjacentHTML("afterend", `<span>TEXT</span>`);<div class="order-summary__section__content">
<table class="product-table">
<thead class="product-table__header">
<tr>
<th scope="col">
<span class="visually-hidden">Image</span>
</th>
<th scope="col">
<span class="visually-hidden">Description</span>
</th>
<th scope="col"><span class="visually-hidden">Qt</span></th>
<th scope="col"><span class="visually-hidden">Price</span></th>
</tr>
</thead>
<tbody data-order-summary-section="line-items">
<tr class="product">
<td class="product__image">
<div class="product-thumbnail">
<div class="product-thumbnail__wrapper">
<img class="product-thumbnail__image" src="//myimage.png" />
</div>
</div>
</td>
<th class="product__description" scope="row">
<span class="product__description__name order-summary__emphasis">Product1</span>
<span class="product__description__variant order-summary__small-text"></span>
</th>
<td class="product__quantity">
<span class="visually-hidden"> 1 </span>
</td>
<td class="product__price">
<span class="order-summary__emphasis skeleton-while-loading">$us21,00</span>
</td>
</tr>
</tbody>
</table>
</div>
3
Answers
You need to append a new row inside the tbody and add a column with span of 4 (Since there are four columns each row) in order to take the entire row space.
Finally align the text to the right of the table
You have to insert a whole row, not just the span. Include
<td colspan="3"></td>to fill the space in the first 3 columns of the table.You are selecting the table row. If you want to insert the text into the price cell, select the price cell instead