我现在界面有一个样式结构<td class="available"><div><span>24</span><div></td>，它是el-date-picker组件中日期选择器下的一个日期元素，现在我想动态的，在</span><div>的位置插入一个新的div标签，class为blueIcon，并将 span{ width: 6px; height: 6px; border-radius: 50%; background-color: #409eff; position: absolute; top: 50%; bottom: 0; }插入其中，请给出完整的代码示例

好的，以下是一个完整的代码示例，使用jQuery实现在日期选择器的日期元素中插入一个蓝色圆点：

<!-- 在head标签中引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 在body标签中放置日期选择器 -->
<div id="datePicker"></div>

<!-- 在script标签中动态插入蓝色圆点 -->
<script>
$(function() {
  // 初始化el-date-picker组件
  $('#datePicker').datepicker({
    inline: true,
    format: 'yyyy-mm-dd',
    startDate: '2022-01-01',
    endDate: '2022-12-31'
  });

  // 找到具有class为"available"的td元素，并遍历它们
  $('.available').each(function() {
    // 在span和div之间插入新的div标签
    $(this).find('span').after('<div class="blueIcon"></div>');

    // 设置新插入的div的样式
    $(this).find('.blueIcon').css({
      'width': '6px',
      'height': '6px',
      'border-radius': '50%',
      'background-color': '#409eff',
      'position': 'absolute',
      'top': '50%',
      'bottom': '0',
      'margin-top': '-3px',
      'right': '0'
    });
  });
});
</script>

<!-- 在style标签中定义样式 -->
<style>
.blueIcon {
  position: relative;
}

.available {
  position: relative;
}

.available:hover {
  cursor: pointer;
}

.available:hover .blueIcon {
  background-color: #66b1ff;
}
</style>

注：以上代码中的el-date-picker组件和datepicker()方法是使用了element-ui库中的日期选择器组件。如果您没有使用该库，需要使用其他日期选择器组件或自行编写日期选择器的相关代码。