1. 首页
  2. 问题列表
  3. 使用JavaScript/jQuery[closed]在Div内部添加HTML表
提问者：小点点

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


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

    谢谢


    • 共2个答案

    匿名用户 

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

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

    匿名用户

    首先，您需要使用属性选择器获得您的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>

    相关问题