Add an HTML table inside Div using JavaScript/JQuery

Question

I have the following Div:-

<div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="OrderOverview_56cb332e-7f34-4d94-8b23-c721796ec1b5_$TextField_inplacerte" style="min-height:84px" aria-labelledby="OrderOverview_56cb332e-7f34-4d94-8b23-c721796ec1b5_$TextField_inplacerte_label" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" rtedirty="true"></div>

and i want to add the following HTML table between the Div:-

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

so i have the following 2 question:-

how i can select the Div based on id that starts with OrderOverview_ and end with $TextField_inplacerte?
also after selecting the Div how i can add the HTML table between it?>

Thanks

[How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) — Andreas, Mar 25 '21 at 13:11
A simple search turns up so many questions here on SO, all with code you can use. Random example https://stackoverflow.com/questions/13541898/how-can-i-select-an-element-by-id-with-jquery-using-regex/13541938 (searched for `jquery selector regex`). — Don't Panic, Mar 25 '21 at 14:06
Does this answer your question? [How can I select an element by ID with jQuery using regex?](https://stackoverflow.com/questions/13541898/how-can-i-select-an-element-by-id-with-jquery-using-regex) — Don't Panic, Mar 25 '21 at 14:06

score 1 · Answer 1 · answered Mar 25 '21 at 13:16

First you need to use attribute selector to get your div

https://api.jquery.com/attribute-starts-with-selector/

And you can put all your content in hidden div and then you put in your div.

var getContent = $('.contentToWrap').html();
$('[aria-labelledby^=OrderOverview]').html(getContent);

.contentToWrap { display:none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ms-rtestate-write ms-rteflags-0 ms-rtestate-field" id="OrderOverview_56cb332e-7f34-4d94-8b23-c721796ec1b5_$TextField_inplacerte" style="min-height:84px" aria-labelledby="OrderOverview_56cb332e-7f34-4d94-8b23-c721796ec1b5_$TextField_inplacerte_label" contenteditable="true" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true" rtedirty="true"></div>

<div class="contentToWrap"> 
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</div>

score 1 · Accepted Answer · answered Mar 25 '21 at 13:18

1

document.querySelectorAll('[id^=OrderOverview][id$=TextField_inplacerte]').forEach(element =>  {    element.innerHTML = "your table";    })

endwith id selection not supporting $ inside it. but you can use above one to achieve your need.

answered Mar 25 '21 at 13:18

Sivarajan Sivanesan

116
7

Add an HTML table inside Div using JavaScript/JQuery

2 Answers2