使用JavaScript/jQuery[closed]在Div内部添加HTML表

Question

我有以下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>

并且我想在div之间添加以下HTML表：-

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

所以我有以下两个问题：-

>

如何根据以OrderOverview_开头、以$TextField_Inplacerte结尾的id选择Div？

另外，在选择Div之后，我如何在它之间添加HTML表？>

谢谢

Answer 1

首先，您需要使用属性选择器获得您的div

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

你可以把你所有的内容放在隐藏的div里，然后你再放进你的div里。

null

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>

Answer 2

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

endwith id选择在其内部不支持$。但您可以使用以上一个来实现您的需要。