Skip to content
Advertisement

Add an HTML table inside Div using JavaScript/JQuery [closed]

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:-

  1. how i can select the Div based on id that starts with OrderOverview_ and end with $TextField_inplacerte?

  2. also after selecting the Div how i can add the HTML table between it?>

Thanks

Advertisement

Answer

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.

Advertisement