appendchild的两个正确用法以及ajax

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gbk" />
        <title></title>

    </head>
    <body>
        <div id="placeholder"></div> 

        <script type="text/javascript">
            var placeholder = document.getElementById("placeholder");
            var description = "test";
            placeholder.innerHTML = description;

            // 或者

            var textNode = document.createTextNode('test123');
            placeholder.appendChild( textNode )



        </script>
    </body>
</html>

自己作业中用了一个ajax结果实现的过程中出现了好多的问题:一开始就是上面的append这个方法自己用错了,然后后来发现ajax没有办法加上数据实际上加上数据之后由于是form提交于是又被刷新没了,所以自己需要把form去掉之后再进行提交。

反正中间出了好多的问题,但是这两个问题应该是最重要的问题了。自己最后慢慢解决后实现成这个样子:

search<input type="text" name="search" id="inputsearch">
<button id="btn">search</button>
<!--    //为什么用onclick=function()不行么我都要哭了-->
<!--</form>-->



<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").on("click",function(){
//            alert($("#inputsearch").val());
            $.ajax({
                url: 'select.php',
                type: 'get',
                dataType: 'json',
                data: {search: $("#inputsearch").val()},
                success: function (result) {
//                alert(result);
                    var json = eval(result);
                    var i = 0;
//                alert(json[0]['bookid']);
                    for (i; i < json.length; i++) {
//                    alert(result[0]);
//                        var app=document.createElement("li");
//                        app.innerHTML=json[i];
//                        var father=document.getElementById("con1");
//                        father.appendChild(app);
                        var app=document.createElement("tr");
                        var  html = "<td>" + json[i]['bookid'] + "</td>" + "<td>" + json[i]['class'] + "</td>" + "<td>" + json[i]['bookname'] + "</td>" + "<td>"+json[i]['press'] + "</td>" +"<td>"+ json[i]['year'] + "</td>" + "<td>" + json[i]['author'] + "</td>" + "<td>" + json[i]['price'] + "</td>" + "<td>" + json[i]['number'] + "</td>" + "<td>" + json[i]['surplus'] + "</td>";
                        var father = document.getElementById("selecttable");
                        app.innerHTML=html;
//                    alert(html);
                        father.appendChild(app);
//                        alert(json.length);
                    }
                }

            });
        });
    });
</script>
原文地址:https://www.cnblogs.com/zjunet/p/4559913.html