文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在java脚本中声明div和id/class

问如何在java脚本中声明div和id/class
EN

Stack Overflow用户
提问于 2018-09-14 20:40:56
回答 1查看 269关注 0票数 0

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

在标题的顶部，我必须显示这些菜单：

​

代码语言：javascript
复制
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:代码

代码语言：javascript
复制
<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代码

代码语言：javascript
复制
// 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
javascript
html
EN

回答 1

Stack Overflow用户

发布于 2018-09-14 21:13:00

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

需要使用document.createElement()函数，通过javascript创建新元素。

​

代码语言：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();
代码语言：javascript
复制
<div id="Menu"></div>

​

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

示例1 :

​

代码语言：javascript
复制
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();
代码语言：javascript
复制
<div id="mainContainer"></div>

​

示例2 :

​

代码语言：javascript
复制
function addTable() {
    var html = "<table border='1'><tr><td>Apple</td><td>Orange</td></tr></table>";
    document.getElementById("mainContainer").innerHTML = html;
}

addTable();
代码语言：javascript
复制
<div id="mainContainer"></div>

​

这两个示例将产生相同的结果。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52332254

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档