javascript如何设置double appendChild函数

Posted 2023-01-10

我尝试lern并使用appendChild函数atm将html CODE（普通代码）转换为javascript unter，如果我想为包含div DOM的div DOM创建附加部分，我不明白它是如何工作的，因为我我想为许多论文编写函数^ _ ^我不想手工设置它。问题是，如果我尝试使用相同的代码下面的其他图像不采取CSS格式，如果我点击正确的部分图像不会从img1更改为img2到img3。普通的HTML格式工作正常。任何想法都会很酷。谢谢

我做了什么：将在//（A）下的代码中看到它。如果我尝试一起使用它它不起作用，如果我尝试（A）单独

//--Thats the (normal code) which i want to transform to javascript
<div class="container">
  <input type="radio" name="images" id="i1" checked>
  <input type="radio" name="images" id="i2" >
  <input type="radio" name="images" id="i3" >
  <div class="slide_img" id="one">
    <img class="img" src="bilder/UE_1_2018.PNG">
    <label for="i3" class="pre"></label>
    <label for="i2" class="nxt"></label>
  </div>
  <div class="slide_img" id="two">
    <img class="img" src="bilder/UE_2_2018.PNG">
    <label for="i1" class="pre"></label>
    <label for="i3" class="nxt"></label>
  </div>
  <div class="slide_img" id="three">
    <img class="img" src="bilder/UE_3_2018.PNG">
    <label for="i2" class="pre"></label>
    <label for="i1" class="nxt"></label>
  </div>
</div>

//DIV where the javascript code would be included
<div class="container">
  <div id="y2018"></div>
</div>

//Thats my first try to transform it before i write the for functions
<script>
  function inputradios(year, divName) 
    //---MAIN-ELEMENT---
    var element1 = document.getElementById(divName);
    //---INPUT---
    var para1 = document.createElement("input");
    para1.type = "radio";
    para1.name = 'images';
    para1.setAttribute('checked','checked');
    para1.setAttribute("id", "i1");
    element1.appendChild(para1);
    //---DIV---
    var para1_1 = document.createElement("div");
    para1_1.setAttribute('class','slide_img');
    para1_1.setAttribute("id", "one"); 
    element1.appendChild(para1_1);
    //---IMG---
    var element2 = document.getElementById(para1_1);
    var para1_1_1 = document.createElement("img");
    para1_1_1.setAttribute('class','img');
    para1_1_1.setAttribute('src','bilder/UE_1' + '_' + year + '.PNG');
    element1.appendChild(para1_1_1);
    //(A) element2.appendChild(para1_1_1);
    //---lABEL 1---
    var para1_1_2 = document.createElement("label");
    para1_1_2.setAttribute('class','pre');
    para1_1_2.setAttribute('for', 'i1' );
    element1.appendChild(para1_1_2);
    //(A) element2.appendChild(para1_1_2);
    //---lABEL 2---
    var para1_1_3 = document.createElement("label");
    para1_1_3.setAttribute('class','nxt');
    para1_1_3.setAttribute('for', 'i1' );
    element1.appendChild(para1_1_3);
    //(A) element2.appendChild(para1_1_3);

    //SAME CODE WITH SOME DIFFERENT CHANGES TO IMPLEMENT IMAGE2,3,...

  
  //inputradios(year, NrOfPages, divName);
  inputradios(2018, 'y2018');
</script>

答案

我稍微修改了你的代码，使其更加清晰和整合。

如果您正在使用DOM函数，请继续使用setAttribute而不是使用element.id='whatever';，它将在以后为您节省挫折感。

在这个例子中，我使用循环来创建简洁，而不是一遍又一遍地创建基本相同的东西。

在第二个循环中，你会看到像? :这样的(i===0) ? 'one' : (i===1) ? 'two' : 'three'的废话。如果您不熟悉，可以使用ternary operators来快捷if / else块。

function inputradios(year, id) 
  // I changed divName to id, for clarification an id is not a name
  const parentDiv = document.getElementById(id);

  // Create INPUTS
  // <input type="radio" name="images" id="i1" checked>
  // <input type="radio" name="images" id="i2" >
  // <input type="radio" name="images" id="i3" >
  for (var i=0;i<3;i++) 
    const input = document.createElement('input');
          input.setAttribute('type', 'radio');
          input.setAttribute('name', 'images');
          input.setAttribute('id', 'i'+ (i+1));
    if (i===0) 
      input.setAttribute('checked','checked');
    
    parentDiv.appendChild(input);
  
  // Create the DIVs
  // <div class="slide_img" id="one">
  //   <img class="img" src="bilder/UE_1_2018.PNG">
  //   <label for="i3" class="pre"></label>
  //   <label for="i2" class="nxt"></label>
  // </div>
  // <div class="slide_img" id="two">
  //   <img class="img" src="bilder/UE_2_2018.PNG">
  //   <label for="i1" class="pre"></label>
  //   <label for="i3" class="nxt"></label>
  // </div>
  // <div class="slide_img" id="three">
  //   <img class="img" src="bilder/UE_3_2018.PNG">
  //   <label for="i2" class="pre"></label>
  //   <label for="i1" class="nxt"></label>
  // </div>
  for (var i=0;i<3;i++) 
    const div = document.createElement('div');
          div.setAttribute('id', (i===0) ? 'one' : (i===1) ? 'two' : 'three');
          div.setAttribute('class', 'slide_img');
    const img = document.createElement('img');
          img.setAttribute('class', 'img');
          img.setAttribute('src', 'bilder/UE_'+ (i+1) +'_2018.PNG');
    const labelPre = document.createElement('label');
          labelPre.setAttribute('for', 'i'+ ((i==0) ? 3 : (i-1)));
          labelPre.setAttribute('class', 'pre');
    const labelNxt = document.createElement('lable');
          labelNxt.setAttribute('for', 'i'+ ((i===2) ? 1 : (i+1)));
          labelNxt.setAttribute('class', 'nxt');
    div.appendChild(img);
    div.appendChild(labelPre);
    div.appendChild(labelNxt);
    parentDiv.appendChild(div);
  

另一答案

//---IMG---
var element2 = document.getElementById('one');
element1.appendChild(para1_1_1);
//(A) 
element2.appendChild(para1_1_1);

像魅力的工作:)很多thx