如何在HTML div的innerHTML部分添加按鈕？

Question

我很新的JavaScript & JQuery，更在HTML的&知識豐富，但我有一些我一直在努力工作了幾天，我的頭撞到桌子，無法弄清楚。也許有人可以幫助我，任何暗示，建議將不勝感激！

我有以下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" 
     }); 
    }); 
    });  

基本上我們有2個按鈕（打開和關閉）。首先打開圖像和文本DIV，然後關閉第二個。我想要做的是在圖像下方（div內）添加另一個按鈕，將您重定向到特定頁面。我可以在HTML中的圖像DIV中添加一個常規按鈕，但是當它加載默認按鈕時出現的那個頁面，雖然它應該只在點擊第一個按鈕時出現（並打開innerHTML）。這意味着我必須在JS中添加它。如果我按下關閉並重設div，則該按鈕將顯示爲它應該的狀態，只有當點擊第一個OPEN按鈕時纔會顯示該按鈕。我不知道什麼是JS腳本，以防止加載按鈕，並加載它只有當我點擊JS內的第一個按鈕。

任何幫助將是神聖的！先謝謝你！

Answer 1

是的，有衝突，因爲你是在你的按鈕在javascript 和 jquery上覆蓋click處理程序。你根本不需要那樣做。你應該在MHO堅持jQuery和只需添加相應的DOM變化在click處理程序，如下所示：

$(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規範進行適當的更改以簡化和簡化。這是一個簡單的練習，你可以自己做。

PS：我已經更新了fiddle以合併我剛剛提到的變化，它似乎工作正常。再次，我知道Jquery語法不合適，但它是故意的。無論如何，我希望它能讓你開始朝正確的方向發展。另外，當使用JavaScript和Jquery時，堅持使用純javascript或jquery，你可以在jquery中實現幾乎所有你需要的功能，而且是更多功能和易用性。