添加除法中的所有元素和 append 它 jquery 而不触及 html

Question

我对编码非常陌生，我不允许触摸给定的 html。 我在 js 文件中添加了代码，我注释掉的代码是我添加到 append 的代码。 但它不起作用。 背景不遵循 b4。 有没有更简单的方法？ 我觉得这是错误的方式，因为代码太庞大了。 这是我在js中添加代码后所拥有的，那些没有注释的这是我在js中添加注释代码时发生的情况

这是预期的 output

我做错了什么或者我怎样才能改善我的代码？

 #contentimages { background-color: grey; }.col { float: left; text-align: center; width: 250px; background-color: #d7dadb; border-radius: 10px; padding:10px; margin: 10px; }.col p { text-align: left; }.imageCS{ width: 150px; height: 150px; opacity: 1; }.imageCS:hover { opacity: 0.5; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }

 var _img3 = document.getElementById('img3'); var newImg3 = new Image; newImg3.onload = function() { _img3.src = this.src; } newImg3.src = 'https://www.suss.edu.sg/images/default-source/card/home_grad2-optimize.tmb-373_373.jpg?sfvrsn=413c2ef7_1'; var para = document.createElement("H3"); var node = document.createTextNode("Graduate Programmes"); para.appendChild(node); var element = document.getElementById("image3"); element.appendChild(para); var para = document.createElement("p"); var node = document.createTextNode("SUSS graduate programmes are structured to hone graduates, giving them a competitive edge as they progress in their careers"); para.appendChild(node); var element = document.getElementById("image3"); element.appendChild(para); /* var newHeading = " <H3>Law Programmes</H3>"; var newParagraph = document.createElement("p"); newParagraph.innerHTML = "Our primary focus is to train and produce lawyers for the practice of law in Singapore, particularly in the areas of Criminal Law and Family Law"; var newImage4 = new Image; newImage4.class="imageCS"; newImage4.src='https://www.suss.edu.sg/images/default-source/card/home_law2-optimize.tmb-373_373.jpg?sfvrsn=80b4ca55_1 '; $("#contentimages").append(newHeading, newParagraph, newImage4); */

 div id="contentimages"> <div id="image1" class="col"> <img id="img1" class="imageCS"/> <H3></H3> <p></p> </div> <div id="image2" class="col"> <img id="img2" class="imageCS"/> <H3></H3> <p></p> </div> <div id="image3" class="col"> <img id="img3" class="imageCS"/> <H3></H3> <p></p> </div> </div>

Answer 1

我为您创建了一个 function 来创建个人资料卡。 使用所需参数调用 function createProfileCard(imageurl,image4Heading,image4Desc)以创建新卡。

function createProfileCard(imageurl,image4Heading,image4Desc){
 let parentNode = document.getElementById("contentimages");
 let element = document.createElement("div");
 element.classList.add('col');
 element.innerHTML = `<img src='${imageurl}' class="imageCS"/><h3>${image4Heading}</h3><p>${image4Desc}</p>`;
 parentNode.appendChild(element);  
}
let image4url = "https://www.suss.edu.sg/images/default-source/card/home_law2-optimize.tmb-373_373.jpg?sfvrsn=80b4ca55_1";
let image4Heading = "Graduate Programmes";
let image4Desc = "Our primary focus is to train and produce lawyers for the practice of law in Singapore, particularly in the areas of Criminal Law and Family Law";
    
createProfileCard(image4url,image4Heading,image4Desc);

此处参考预期的output -> https://codepen.io/askannan/pen/RwoZyyK