javascript - 如何在不修改样式的情况下将内容插入到元素的末尾？

Question

使用 Jquery 我有一个函数，我想将内容插入到每个元素的末尾以保持样式。它与 document.write(); 一起使用，但与 append(); 一起使用时它会改变样式。我该如何解决？

JS :

function show_calendar () {
    $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'><tr>");

    for (var i=0; i<=6; i++) {
        $("#output").append("<th style='padding: 2px;'>"+week_days[i]+"</th>");
    }

//other code here ...

HTML :

<input type="text" id="cal" onclick="show_calendar();" />
<div id="output"></div>

代码完整JS

function show_calendar () {
    $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'><tr>");
    for (var i=0; i<=6; i++) {
         $("#output table").append("<th style='padding: 2px;'>"+week_days[i]+"</th>");
    }
                $("#output").append("</tr>");
                count = 1;
                days_count = 1;
                for (var i=0; i<6; i++) {
                     $("#output").append("<tr>");
                    for (var j=0; j<7; j++) {
                        if (last_day == 1)
                            last_day=30;
                        else if (last_day == 2)
                            last_day=29;
                        else if(last_day == 3)
                            $last_day=28;
                        if (days_count > last_day || count < first_day) {
                            $("#output").append("<td></td>");
                        }else {
                     $("#output").append("<td id="+days_count+" style='text-align: right;border: 1px solid #c5c5c5;background: #f6f6f6;font-weight: normal;color: #454545;height: 22px; cursor:pointer'>"+days_count+"</td>");
                            days_count+=1;
                        }
                        count+=1;
                    }
                     $("#output").append("</tr>");
                }
                $("#output").append("</table></div></div>");

                $("td#"+day).css("background", "yellow");


            }

Answer 1

Working fiddle .

您必须将 th append 到表中，而不仅仅是在末尾:

$("#output table").append("<th style='padding: 2px;'>"+week_days[i]+"</th>");
___________^^^^^

希望这对您有所帮助。

var title_month = "August";
var year = 2016;
var week_days = ['Mon','Tue','Thu','Wed','Fri','Sat','Sun']
var first_day= 1;
var last_day = 30;
var day = 7;

function show_calendar () {
  $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'>");

  var thead = $('<thead><tr></tr></thead>')
  for (var i=0; i<=6; i++) {
    thead.append("<th style='padding: 2px;'>"+week_days[i]+"</th>");
  }
  $("#output table").append(thead);

  count = 1;
  days_count = 1;

  for (var i=0; i<6; i++) {
    var tr = $('<tr></tr>');

    for (var j=0; j<7; j++) {
      if (last_day == 1)
        last_day=30;
      else if (last_day == 2)
        last_day=29;
      else if(last_day == 3)
        $last_day=28;
      if (days_count > last_day || count < first_day) {
        tr.append("<td></td>");
      }else {
        tr.append("<td id="+days_count+" style='text-align: right;border: 1px solid #c5c5c5;background: #f6f6f6;font-weight: normal;color: #454545;height: 22px; cursor:pointer'>"+days_count+"</td>");
        days_count+=1;
      }
      count+=1;
    }
    $("#output table").append(tr);
  }

  $("td#"+day).css("background", "yellow");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="cal" onclick="show_calendar();" />
<div id="output"></div>