javascript - 如何在javascript中声明div和id/class-6ren

javascript - 如何在javascript中声明div和id/class

转载作者：行者123 更新时间：2023-12-03 01:07:33

我有一个index.html 文件，其中表单字段中的表单操作是confirm.html。在confirm.html中一些数据，我使用js显示。但显示我决定使用菜单的唯一表格，这样对用户更具吸引力。每当我试图声明 div(<h1>data</h1>)在confirm.html中，它不会显示任何数据。所以我决定使用js来声明。

标题顶部我必须显示这些菜单:

document.write("<div class="Menu">");

document.write("<div class="leftmenu">");
document.write("<h4>Fegli</h4>");

document.write("<div class="Menu">");
doucment.write("<ul>");
document.write("<li>Home</li>");
document.write("</ul>");

document.write("</div>");
document.write("</div>");
document.write("</div>");

Confirm.html:代码

<html>
<head>

<script type="text/javascript" src="calculate.js"> 
</script>
</head>    

<body onload="init();">
<div id="Menu">
it wont showing on web page
</div>

</body>

</html>

Calculate.js 代码

// Called on body's `onload` event
var cumulative=0;
 function init() {

  var salary = parseInt(localStorage.getItem("salary"));
  var percent = parseFloat(localStorage.getItem("percent"));
  var age = parseInt(localStorage.getItem("age"));
  var rAge = parseInt(localStorage.getItem("rAge"));
  var sel = localStorage.getItem("sel");

  var roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000); //Doing Rounding for basic column Display
  var basic;
  var factor = 0;
  var biWeekly = 0, monthly = 0,annual = 0;


    //Displaying Headers
    document.write("<head>");
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"confirm.css\">");
    document.write("<title>Result</title>");
    document.write("</head>");
    document.write("<body>");

 /* document.write("<center>")
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
   dd = '0' + dd
  }

  if (mm < 10) {
   mm = '0' + mm
  }
  today = mm + '/' + dd + '/' + yyyy;
  document.write("<h1>" + "FEGLI CALCULATIONS ON" + "&nbsp;" + today + "</h1>");
  document.write("</center>")
  */


  document.write("<table><tr><th>&nbsp;Age&nbsp;</th><th>&nbsp;Annual-Salary&nbsp;</th><th>&nbsp;BiWeekly-Premium&nbsp;</th><th>&nbsp;Monthly-Premium&nbsp;</th><th>&nbsp;Annual-Premium&nbsp;</th><th>&nbsp;Cumulative-Premium&nbsp;</th><th>Basic&nbsp;</th><th>&nbsp;Total&nbsp;</th></tr>");
  basic = parseInt(roundedSalary * calculateFactor(age));
  //document.write("roundedSalary"+roundedSalary+"calculateFactor"+calculateFactor(age));
  premium = calculateBiweekly(salary, basic, age, rAge);
  biWeekly = premium[0];
  monthly = premium[1];
  annual = premium[2];
  cumulative = premium[3];


  document.write("<tr><td>" + age + "/" + (age + 1) + "</td><td>" + "$" + salary.toFixed(2) + "</td><td>" + "$" + biWeekly.toFixed(2) + "</td><td>" + "$" + monthly.toFixed(2) + "</td><td>" + "$" + annual.toFixed(2) + "</td><td>" + "$" + cumulative.toFixed(2) + "</td><td>" + "$" + basic + "</td><td>-</td></tr>");

  salary = parseFloat(salary);

  for (var i = age + 1; i < 101; i++) {
   document.write("<tr>");
   document.write("<td>" + i + "/" + (i + 1) + "</td>");

   if (i < rAge) {

    salary = salary + (salary * percent);

    roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000);
    //          document.write("age"+i+"roundedSalary"+roundedSalary+"<br>");
    document.write("<td>" + "$" + salary.toFixed(2) + "</td>");
   } else {
    salary = 0;
    document.write("<td>-</td>");
   }



   basic = parseInt(roundedSalary * calculateFactor(i));

   premium = calculateBiweekly(salary, basic, i);
   biWeekly = premium[0];
   monthly = premium[1];
   annual = premium[2];
   cumulative = premium[3];

   document.write("<td>" + "$" + biWeekly.toFixed(2) + "</td>");
   document.write("<td>" + "$" + monthly.toFixed(2) + "</td>");
   document.write("<td>" + "$" + annual.toFixed(2) + "</td>");
   document.write("<td>" + "$" + cumulative.toFixed(2) + "</td>");

   document.write("<td>" + "$" + basic + "</td>");
   document.write("<td>-</td>");
   document.write("</tr>");
 }
  document.write("</table>");
  document.write("</body>")
 }

 function calculateFactor(age) {
  var factor = 0;
  if (age > 35 && age < 45) {


   switch (age) {


    case 36:
     factor = 1.9;
     break;

    case 37:
     factor = 1.8;
     break;

    case 38:
     factor = 1.7;
     break;

    case 39:
     factor = 1.6;
     break;

    case 40:
     factor = 1.5;
     break;

    case 41:
     factor = 1.4;
     break;

    case 42:
     factor = 1.3;
     break;

    case 43:
     factor = 1.2;
     break;

    case 44:
     factor = 1.1;
     break;


   }
  } else if (age <= 35) {
   factor = 2;
  } else if (age >= 45) {
   factor = 1;
  }

  return factor;
 }

 function calculateBiweekly(salary, basic, age) {
  var biWeekly = 0;

  if (salary > 0) {

   biWeekly = ((basic / calculateFactor(age)) * 0.15) / 1000;
   monthly = ((basic / calculateFactor(age)) * 0.325) / 1000;



  } else if (salary == 0 && age <= 65) {



   biWeekly = ((basic / calculateFactor(age)) * (2.455 / 2.166)) / 1000;
   monthly = ((basic / calculateFactor(age)) * (2.455)) / 1000;


  } else if (salary == 0 && age > 65) {

   //document.write("age"+age+"salary"+salary+"<br>");
   biWeekly = ((basic / calculateFactor(age)) * (2.13 / 2.166)) / 1000;
   monthly = ((basic / calculateFactor(age)) * (2.13)) / 1000;


  }
   annual = 12 * monthly;
cumulative = cumulative+annual;
  //document.write("cumulative"+cumulative+"<br>");

  return [biWeekly, monthly, annual, cumulative];
 }// Called on body's `onload` event

最佳答案

我不建议使用 document.write() 在 DOM 中创建元素。

您需要使用 document.createElement() 函数来使用 JavaScript 创建新元素。

function addMenu() {
    var html = '<div class="Menu">';
    html += '<div class="leftmenu">';
    html += '<h4>Fegli</h4>';
    html += '<div class="Menu">';
    html += '<ul><li>Home</li></ul>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    document.getElementById("Menu").innerHTML = html;
}

addMenu();

<div id="Menu"></div>

在您的代码中，您使用 document.write() 应用了 table，您还可以使用 document.createElement 创建 table 标记() 函数。检查以下示例:

示例 1:

function addTable() {
    var c, r, t;
    t = document.createElement('table');
    t.border=1;
    
    r = t.insertRow(0);//create row
    
    c = r.insertCell(0);///create cell
    c.innerHTML = "Apple";
    c = r.insertCell(1);///create second cell
    c.innerHTML = "Orange";
    
    document.getElementById("mainContainer").appendChild(t);
}

addTable();

<div id="mainContainer"></div>

示例 2:

function addTable() {
    var html = "<table border='1'><tr><td>Apple</td><td>Orange</td></tr></table>";
    document.getElementById("mainContainer").innerHTML = html;
}

addTable();