Question

我正在尝试创建一个简单的html页面的一些动态按钮。这就是我到目前为止所做的：

<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。

Answer 1

将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()
{
}

在IE 10＆amp ;;中的jsfiddle中工作9没有检查较低版本

JSFiddle

Answer 2

不要使用document.write（） - 这是一个非常难看的遗留功能。

HTML标签（因为大约v4的html）应该是小写的。还有其他关于代码的东西很乱 - 但是有一个单独的StackOverflow站点用于代码审查。

这里没有什么是MSIE特定的 - 我强烈建议你不要使用MSIE特定的代码 - 如果你为Firefox或webkit编写代码，那么你会发现它在不同的目标（包括MSIE）中更容易移植。 / p>

再试一次......

<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更灵活，更快。

使用JavaScript动态添加按钮

2 个答案: