使用JavaScript動態添加按鈕

我想創建一個簡單的HTML頁面一些動態按鈕。這是我到目前爲止所做的：使用JavaScript動態添加按鈕

<HTML> 
<BODY bgColor="#d4d4d4" onload="OnLoad()" > 

<script language = "javascript"> 

function OnQuery() 
{ 
    alert("Query"); 
} 
function OnLoad() 
{ 
    document.write("<INPUT onclick=\"OnQuery()\" type=\"button\" value=\" Search \" name=\"querybtn\" />"); 
} 
</script> 
</BODY> 
</HTML>

正如你可以從代碼猜測我是非常新的JavaScript。按鈕「搜索」正在增加，但點擊時沒有調用OnQuery。我究竟做錯了什麼？這是一個簡單的原型代碼，僅適用於IE。

來源

2013-08-17 Asha

你試過任何xslt嗎？轉換xml – kbvishnu

不..我只是不想生成表。在表格後，我想要一些按鈕，當用戶執行某些操作時。所以我想xslt在這裏沒有幫助。 – Asha

您在腳本標記中拼寫了「language」錯誤。 – Ringo

改變了document.writes使用使用document.createElement做DOM創建

function OnQuery() 
{ 
    alert("Query"); 
} 

function OnLoad() 
{ 
    var Objs = new Array(); 
    var xmlInput = "<QueryResult>Some values</QueryResult>"; 

    var doc = xmldso.XMLDocument; 
    doc.loadXML(xmlInput); 

    var x = doc.getElementsByTagName("QueryResult"); 

    for(i=0; i < x.length; ++i) 
    { 
     Objs[i] = new MyObject(x[i]); 
    } 


    //Create the table element 
    var table = document.createElement("table"); 
    table.setAttribute("border",1); 

     for(i=0; i < Exams.length;++i) 
     { 
      //Create the row element 
      var row = document.createElement("tr"); 
      //Create the 2 columns 
      var col1 = document.createElement("td"); 
      var col2 = document.createElement("td"); 

      //Create the checkbox input 
      var chkId = "Row" + i;    
      var chkIdInput = document.createElement("input"); 
      chkIdInput.setAttribute("type","checkbox"); 
      chkIdInput.id = chkId; 

      //Add the checkbox to the column 
      col1.appendChild(chkIdInput); 

      //Set the text of second column 
      col2.textContent = Objs[i].Prop1; 

      //Add columns to the row 
      row.appendChild(col1); 
      row.appendChild(col2); 

      //Add the row to the table 
      table.appendChild(row); 
     } 
     //Add the table to the body 
     document.body.appendChild(table); 

     //Create the search button 
     var searchBtn = document.createElement("input"); 
     //Set the attributes 
     searchBtn.setAttribute("onclick","OnQuery()"); 
     searchBtn.setAttribute("type","button"); 
     searchBtn.setAttribute("value","Search"); 
     searchBtn.setAttribute("name","querybtn"); 
     searchBtn.style.marginLeft = "20px"; 
     searchBtn.style.marginTop = "20px"; 
     //Add the button to the body 
     document.body.appendChild(searchBtn); 
} 


function OnUnload() 
{ 
}

作品中的jsfiddle在IE 10 & 9沒有檢查更低版本

JSFiddle

來源

2013-08-17 10:57:49

唐永遠不會使用document.write（） - 這是一個非常難看的遺留功能。

HTML標籤（因爲html的v4）應該是小寫。還有其他關於代碼的東西很混亂 - 但是有一個獨立的StackOverflow站點用於代碼審查。我強烈建議你不要寫MSIE特定的代碼 - 如果你爲Firefox或webkit編寫代碼，那麼你會發現它在不同目標（包括MSIE）中的移植性更強。

再次嘗試....

<html> 
<script> 
function OnQuery() { 
    alert("Query"); 
} 
function OnLoad() { 
    var t=false; 
    if (t = document.getElementById("placeholder")) { 
     t.innerHTML="<INPUT onclick=\"OnQuery()\" type=\"button\" value=\" Search \" name=\"querybtn\" />"; 
    } 
} 
if (window.addEventListener) { 
    window.addEventListener('load', OnLoad, false); 
} else if (window.attacheEvent) { 
    window.attachEvent('onload', OnLoad); 
} 
</script> 
<body style="background-color: #d4d4d4"> 
<div id="placeholder"></div> 
</body> 
</html>

雖然你可以明確地使用DOM的createElement，並添加節點的東西 - 它就會變得混亂和複雜的構造工作時慢 - HTML片段和innerHTML的是更靈活，更快捷。

來源

2013-08-17 11:08:29 symcbean

使用JavaScript動態添加按鈕

回答

相關問題