javascript - 如何在不使用 document.writes 的情况下在 document.getelementById 函数中编写 for 循环

Question

我想将我的代码从现代 document.getElementById 中的 document.write 样式更改为更好的选择，因为我想使用这样的多对象数组

{kapitel:['Negation','second'], name: ["<span id='buch_mathematik_symb_kap_2_8'>...</span>",'second'], a_href:['symb_negation','dsa'], buch: ['Mathematik','ddd']},

我不知道如何使用 document.getElementById('..').innerHTML += .... 表单来解决这个问题。如果我在一个 for 循环中写第二个 for 循环来解决这个问题，我会得到一些 NaN 错误，这并不酷。有人有这方面的建议或小例子吗？谢谢

let inhaltsverzeichnis_symbole_mathematik = [ 
  //{kapitel:'Negation', name:"<span id='buch_mathematik_symb_kap_2_8'>...</span>", a_href:'symb_negation', buch: 'Mathematik'},
  {kapitel:['Negation','second'], name: ["<span id='buch_mathematik_symb_kap_2_8'>...</span>",'second'], a_href:['symb_negation','dsa'], buch: ['Mathematik','ddd']},
  {kapitel:'Konjunktion', name:"<span id='buch_mathematik_symb_kap_2_11'>...</span>", a_href:'symb_konjunktion', buch: 'Mathematik'},
  {kapitel:'Disjunktion', name:"<span id='buch_mathematik_symb_kap_2_13'>...</span>", a_href:'symb_disjunktion', buch: 'Mathematik'},
  {kapitel:'Implikation/Subjunktion', name:"<span id='buch_mathematik_symb_kap_2_13_1'>...</span>", a_href:'symb_implikation', buch: 'Mathematik'},
  {kapitel:'Äquivalenz', name:"<span id='buch_mathematik_symb_kap_2_13_2'>...</span>", a_href:'symb_equivalence', buch: 'Mathematik'},
  {kapitel:'Nand', name:"<span id='buch_mathematik_symb_kap_2_13_5'>...</span>", a_href:'symb_nand', buch: 'Mathematik'},
  {kapitel:'Xor', name:"<span id='buch_mathematik_kap_symb_2_13_5_1'>...</span>", a_href:'symb_xor', buch: 'Mathematik'},
  {kapitel:'Teilbarkeit', name:"<span id='buch_mathematik_kap_symb_2_13_3'>...</span>", a_href:'symb_teilbarkeit', buch: 'Mathematik'},
]
let inhaltsverzeichnis_Beweisfuehrung_mathematik = [ 
  {kapitel:'2.1', name:'Beweisführung Rechtwinkeliges Dreieck', a_href:'bf_kapitel_2_1', buch: 'Mathematik'},
  {kapitel:'2.3', name:'Beweisführung direkter, indirekter und widersprüchlicher Beweis', a_href:'bf_kapitel_2_3', buch: 'Mathematik'},
]
    
let inhaltsverzeichnis_mathematik = [ 
  {kapitel:'1', name:'Bla Bla zu beginn', a_href:'Grundbegriffe_der_Immunologie', buch: 'Mathematik'},
  {kapitel:'1.1', name:'Über dieses Lehrbuch, Mathematiker und Mathematik', a_href:'zf_kapitel_1_1', buch: 'Mathematik'},
  {kapitel:'2.1', name:'Eine beweisende Wissenschaft', a_href:'zf_kapitel_2_1', buch: 'Mathematik'},
  {kapitel:'2.2', name:'Grundbegriffe der Aussagelogik', a_href:'zf_kapitel_2_2', buch: 'Mathematik'},
  {kapitel:'2.3', name:'Definition, Satz, Beweis', a_href:'zf_kapitel_2_3', buch: 'Mathematik'},
]    

document.write('<button class="buttn" onclick="myFunction(\'index\')" style="color:red;">Inhaltsverzeichnis</button><div id="index" style="display:none-;">');
document.write('<ul style="list-style: none;">');
document.write('<table><tr><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Kapitel -->
for (NR_i = 0; NR_i < inhaltsverzeichnis_mathematik.length; NR_i++) {
  document.write(
    '<li>'
    +  '<table>'
    +    '<tr>'
    +      '<td style="width:30px">' 
    +        inhaltsverzeichnis_mathematik[NR_i].kapitel 
    +      '</td><td>'
    +        '<a href="#'
    +          inhaltsverzeichnis_mathematik[NR_i].a_href 
    +        '" >' 
    +          inhaltsverzeichnis_mathematik[NR_i].name 
    +        '</a>'
    +      '</td>'
    +    '</tr>'
    +  '</table>'
    +'</li>' 
  );
}
document.write('</td><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Beweise -->
for (NR_i = 0; NR_i < inhaltsverzeichnis_Beweisfuehrung_mathematik.length; NR_i++) {
  document.write(
      '<li>'
    +   '<table>'
    +     '<tr>'
    +       '<td style="width:30px">' 
    +         inhaltsverzeichnis_Beweisfuehrung_mathematik[NR_i].kapitel 
    +       '</td><td>'
    +         '<a href="#'
    +           inhaltsverzeichnis_Beweisfuehrung_mathematik[NR_i].a_href 
    +         '" >' 
    +           inhaltsverzeichnis_Beweisfuehrung_mathematik[NR_i].name 
    +         '</a>'
    +       '</td>'
    +     '</tr>'
    +   '</table>'
    + '</li>' 
  );
}
document.write('</td><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Symbole -->
for (NR_i = 0; NR_i < inhaltsverzeichnis_symbole_mathematik.length; NR_i++) {
  document.write(
    '<li>'
  +   '<table>'
  +     '<tr>'
  +       '<td style="width:30px">'
  +         inhaltsverzeichnis_symbole_mathematik[NR_i].name 
  +       '</td>'
  +       '<td>'
  +         '<a href="#'
  +           inhaltsverzeichnis_symbole_mathematik[NR_i].a_href 
  +         '" >' 
  +           inhaltsverzeichnis_symbole_mathematik[NR_i].kapitel 
  +         '</a>'
  +       '</td>'
  +     '</tr>'
  +   '</table>'
  + '</li>' 
  );
}			
document.write('</td></tr></table>');
document.write('</ul></div>');

Answer 1

函数有一些优化:

function content(param,i){
 return `<li>
         <table>
          <tr>
            <td style="width:30px">
              ${param[i].name}
            </td>
            <td>
              <a href="#
                ${param[i].a_href}
               " > 
                 ${param[i].kapitel }.
               </a>
            </td>
           </tr>
         </table>
        </li> `;

 }  

 function createContent(obj){
    for (let i = 0; i < obj.length; i++) {
        document.write(content(obj,i));
    }
 }

 document.write('<button class="buttn" onclick="myFunction(\'index\')" style="color:red;">Inhaltsverzeichnis</button><div id="index" style="display:none-;">');
document.write('<ul style="list-style: none;">');
document.write('<table><tr><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Kapitel -->

createContent(inhaltsverzeichnis_mathematik);//call function

document.write('</td><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Beweise -->

createContent(inhaltsverzeichnis_Beweisfuehrung_mathematik);//call function

document.write('</td><td valign="top">');
<!-- Inhaltsverzeichnis buch_mathematik.js - Symbole -->

createContent(inhaltsverzeichnis_symbole_mathematik);//call function

document.write('</td></tr></table>');
document.write('</ul></div>');