如何在HTML分区的innerHTML部分中添加按钮

How can I add a button within an innerHTML section of a HTML div?

本文关键字：添加 按钮 innerHTML HTML 分区      更新时间：2023-09-26

我对JavaScript&JQuery，对html&css，但我有一件事已经做了好几天了，我的头撞到了桌子上，却想不出来。也许有人能帮我，任何提示、建议都将不胜感激！！

我有以下HTML：

<div id="projects" class="fluid">
<button onClick="myFunction2()" class="viewprojectsclose">Close</button>
<button onclick="myFunction()" class="viewprojects">View Projects</button>
<div id="projectsimg">
</div>
<div id="projectstxt">
</div>
</div>

使用以下JavaScript和JQuery:

function myFunction() {
document.getElementById("projectstxt").innerHTML = 'some text some text some text';
document.getElementById("projectstxt").style.borderBottom = "thin solid #000" ;     
document.getElementById("projectstxt").style.display = "block";  
document.getElementById("projectstxt").style.paddingBottom ="10px";     
         document.getElementById("projectsimg").style.padding = "100px" ;
         document.getElementById("projectsimg").style.background =     "url('../Assets/img/services/image1.png')" ;
         document.getElementById("projectsimg").style.backgroundRepeat = "no-repeat";
         document.getElementById("projectsimg").style.backgroundSize = "20%";
         document.getElementById("projectsimg").style.display = "block";
         document.getElementById("projectsimg").style.transition = "all 0.5s ease-in-out";
         document.getElementById("projectsimg").style.backgroundOrigin = "border-box";
         document.getElementById("projectsimg").style.marginTop = "5%";
;}  
function myFunction2() {
    document.getElementById("projectstxt").style.display = "none";
    document.getElementById("projectsimg").style.display = "none";
;}
$(document).ready(function()
  {
  $(".viewprojects").click(function(){
    $("#projects").animate({
        height:"300px"
        });
  });
  $(".viewprojectsclose").click(function(){
    $("#projects").animate({
        height:"80px"
        });
  });   
  });

基本上我们有两个按钮（打开和关闭）。第一个打开图像和文本DIV，第二个关闭。我想做的是在图像下面（div中）添加另一个按钮，它将把你重定向到一个特定的页面。我可以在HTML中的图像DIV中添加一个常规按钮，但当它加载页面时，该按钮默认会出现在页面上，尽管它应该只在单击第一个按钮时出现（并打开innerHTML）。这意味着我必须以某种方式在JS中添加它。如果我按下close并重置div，那么只有在单击第一个OPEN按钮时，该按钮才会正常显示。我不知道JS脚本是什么，一开始可以防止加载按钮，只有当我点击JS中的第一个按钮时才能加载。

任何帮助都是神圣的！！提前谢谢！

是的，存在冲突，因为您在javascript和jquery中过度使用按钮的click处理程序。你根本不必这么做。在MHO中，您应该坚持Jquery，只需在click处理程序中添加适当的DOM更改，如下所示：

$(document).ready(function()
{      
 $(".viewprojects").click(function(){
  //Animate first
   $("#projects").animate({
     height:"300px"
     });
 //Update DOM 
 document.getElementById("projectstxt").innerHTML = 'some text some text some text';
 document.getElementById("projectstxt").style.borderBottom = "thin solid #000" ;     
 document.getElementById("projectstxt").style.display = "block";  
 document.getElementById("projectstxt").style.paddingBottom ="10px";     
 document.getElementById("projectsimg").style.padding = "100px" ;
 document.getElementById("projectsimg").style.background =         "url('../Assets/img/services/image1.png')" ;
 document.getElementById("projectsimg").style.backgroundRepeat = "no-repeat";
 document.getElementById("projectsimg").style.backgroundSize = "20%";
 document.getElementById("projectsimg").style.display = "block";
 document.getElementById("projectsimg").style.transition = "all 0.5s ease-in-out";
 document.getElementById("projectsimg").style.backgroundOrigin = "border-box";
 document.getElementById("projectsimg").style.marginTop = "5%";
});

 $(".viewprojectsclose").click(function(){
  document.getElementById("projectstxt").style.display = "none";
  document.getElementById("projectsimg").style.display = "none";
  //Animate the div
  $("#projects").animate({
    height:"80px"
    });
 });   
 });

现在，我刚刚重组了你在问题中发布的代码，让你了解如何修复它。代码没有经过净化，为了简单起见，应该根据Jquery规范适当地更改语法。这是一个简单的练习，你可以自己做。

附言：我已经更新了小提琴，加入了我刚才提到的变化，它似乎运行得很好。同样，我知道Jquery语法不合适，但它是经过深思熟虑的。不管怎样，我希望它能让你朝着正确的方向开始。此外，当使用javascript和Jquery时，请坚持使用纯javascript或Jquery，因为您可以在Jquery中实现几乎所有需要的功能，而且它功能更加通用且易于使用。

相关文章：