如何创建一些具有相同样式表的div？

Question

这是我的代码。我想在我的'content1'div中获得动态div内容列表。 例如。当这个页面开始加载时，我会做一个ajax请求来获取一些信息。根据信息，创建一些div（div的数量来自info数组的数量），它与“accountContent”div具有相同的样式表，但内容不同。

<div class="main">
  <br>
  <div id="content1" style=" border-radius: 8px; width: 100%;margin: auto; background-color: white;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px;  ">
    <br>
    <div class="accountContent">
      <div style="width: 95%;margin: auto; background-color: rgb(245,245,245);height: 40px;border-radius: 10px">
        <div class="col-md-4" style="padding-top: 10px;">
          <p style="width:95%; margin: auto">公众号名称</p>
        </div>
        <div class="col-md-4" style="padding-top: 10px;">
          <p style="width:95%; margin: auto">接入状态：</p>
        </div>
        <div class="col-md-4" style="padding-top: 5px; ">
          <button type="button" class="button button-small button-plain button-borderless" data-toggle="tooltip" data-placement="left" title="删除" style="float:right;"><i class="fa fa-times" style=" color: #101010"></i></button>
        </div>
      </div>
      <div style="width: 95%;margin: auto; background-color: white;height: 50px;border-radius: 10px">
        <div class="col-md-4" style="padding-top: 10px;">
          <img src="images/default.jpg" style="width: 40px;height: 40px;border-radius: 20px;float: left">
        <div style="margin-left: 10px; padding-top: 10px;float: left"><p>物管助手</p></div>
      </div>
      <div class="col-md-4" style="padding-top: 20px;">
        <p style=" margin-left: 12px;float: left">接入成功</p><i class="fa fa-check" style="padding-top: 2px; padding-left: 2px;"></i>
      </div>
      <div class="col-md-4" style="padding-top: 10px;">
        <a href=# class="button button-pill button-tiny button-border " data-toggle="tooltip" data-placement="right" title="编辑公众号信息" style=" height: 36px;float: right;"><i class="fa fa-pencil" style="padding-top: 11px;"></i> 编辑</a>
        <a href=# class="button button-pill button-tiny button-border" data-toggle="tooltip" data-placement="left" title="管理公众号功能" style="height: 36px;float: right;margin-right: 5px;"><i class="fa fa-wrench" style="padding-top: 11px;"></i> 功能管理</a>
      </div>
    </div>
    <br>
  </div>
  <br>
  <br>
</div>

如下截图所示：

Answer 1

您添加到页面的任何标记都将使用已应用于页面的CSS规则进行样式设置。在您的情况下，听起来您只需将.accountContent应用于这些新DIV。

您不必为它们创建样式表。如果它们的样式与页面上已有的样式不同，只需将您已应用的CSS选择器添加到当前CSS文件中的那些新DIV中。当Ajax将新的DIV添加到页面时，它们将根据它们匹配的选择器进行样式化。