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();

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

两个示例都会给出相同的结果。

关于javascript - 如何在javascript中声明div和id/class，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52332254/

文章推荐： javascript - 过滤Leaflet中的geojson点而不对它们进行聚类

文章推荐： MongoDB 最优索引 |查询规划器行为

文章推荐： node.js - 如何返回 mongoDB 数组中值的最大出现次数

文章推荐： javascript - 使用 jsPDF 和邮件附件生成 PDF

ios - 声明 'subscribe' 不能覆盖多个父类(super class)声明 (ReSwift)
我在覆盖 ReSwift Pod 中的函数时遇到问题。我有以下模拟类(class): import Foundation import Quick import Nimble import RxSwi
clang - Swift:声明 'description' 不能覆盖多个父类(super class)声明
我有一个类似于下面的继承结构。我正在采用 Printable 协议(protocol)并努力覆盖 description 属性。我遇到了一个谷歌此时似乎不知道的奇怪错误，提示为第三类，并引用了第二类和
C++ 声明
我有一个类“Cat”和 Cat 类的一个子类“DerivedCat”。 Cat 有一个函数 meow()，而 DerivedCat 覆盖了这个函数。在应用程序中，我声明了一个 Cat 对象: Cat
Kotlin变量详解：声明、赋值与最佳实践指南
Kotlin 变量变量是用于存储数据值的容器。要创建一个变量，使用 var 或 val，然后使用等号（=）给它赋值：语法 var 变量名 = 值 val 变量名 = 值示例 va
使用前的 C 声明
C 中的所有标识符在使用前都需要声明，但我找不到它在 C99 标准中表示的位置。我觉得也是指宏定义，不过定义的只是宏展开顺序。最佳答案 C99:TC3 6.5.1 §2，脚注 79 明确指出: T
仅允许在文档开头的 XML 声明
今天我的博客提要显示错误: This page contains the following errors: error on line 2 at column 6: XML declaration
ORACLE IIF 声明
在编写 IIF 语句、表和下面给出的语句时出现错误。陈述: SELECT IIF(EMP_ID=1,'True','False') from Employee; table : CREATE TAB
java - 声明、初始化和调用时不显示进度对话框
我正在创建一个登录 Activity ，我希望它在按下登录按钮时显示进度对话框，我声明、初始化并调用了它，但它没有显示。但是当我在创建时调用进度对话框时，它出现了这是我的代码: public cla
Java: vector 声明
当我输入声明语句时: Vector distance_vector = new Vector(); 我收到错误(在两种情况下都在“双”下划线): Syntax error on token "doub
kubernetes - docker容器目录被持久卷覆盖(声明)
我正在本地部署在docker-for-desktop中。这样我将来可以迁移到kubernetes集群。但是我面临一个问题。使用永久卷时，docker容器/ pod中的目录将被覆盖。我正在拉最新的S
Java 对象的初始化/声明
我有一个 MyObject 类型的对象 obj，我声明了它的实例。 MyObject obj; 但是，我没有初始化它。 MyObject 的类看起来像: public class MyObject {
java - 声明 for 更好还是相同？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
Java 声明 ArrayList
这个问题已经有答案了: Android: Issue during Arraylist declaration (1 个回答) 已关闭 9 年前。有时我会看到 ArrayList 声明如下 Arra
Java 声明/变量作用域问题
我对java比较陌生，经过大量搜索，我无法将相关问题的任何解决方案与我的解决方案配对。我正在尝试实现一种非常简单的方法来写入/读取数组，但编译器无法识别它。 “键盘”也是一个“无法识别的变量”。这是数
java - 声明/初始化和内存分配
简短:何时分配内存 - 在声明或初始化时？长整型:int x;将占用与int z = 10;相同的内存。此外，这对于包含更多数据的自定义对象将如何工作。假设我有这个对象: public class
c++ - 声明、定义和调用
我需要使用此程序更好地理解函数定义、声明和正确调用。我真的需要了解如何使用它们。您能否向我展示编写此程序的正确方法(所有三个都正确并进行解释)？ #include #include quad_eq
c - 函数头/声明
这是我的主要功能以及我要传递的内容。 int main(void){ struct can elC[7]; // Create an array of stucts Initiali
c# - lambda 声明
我想知道是否有更好的方法来完成此任务；我有一个对象 - 其中一个属性是字典。我有一组逗号分隔值。我需要过滤 Dictionary 并仅获取 Dictionary 值至少与其中一个值匹配的那些元素这
C++ using 声明
下面的using-declarations有什么意义 using eoPop::size; using eoPop::operator[]; using eoPop::back; using eoPo
javascript - 声明 for 循环变量的最佳实践
我的问题更像是一个关于 for 循环样式的好奇问题。在阅读别人的一些旧代码时，我遇到了一种我以前从未见过的风格。 var declaredEarlier = Array for(var i=0, le

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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