Question

我正在尝试动态地将html元素添加到div中，但我根本无法这样做。我将var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>';替换为var s = '<button>click</button>';只是为了检查我追加的字符串是否有任何问题，但仍然没有运气。

脚本

   <script type="text/javascript">

       window.onload = GetRecords();     

            function GetRecords() {      
                $.ajax({
                    type: "POST",
                    url: "Gallery.aspx/insertimg",                   
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }

        function OnSuccess(response) {

            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var count = parseInt(xml.find("imgtable").length);
            var imageTable = xml.find("imgtable");           

            for (var i = 0; i < count; i++) {               
              var hrf = imageTable.find("ImageUrl").eq(i).text();                            
             var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>';
              $('.html5gallery').append(s);               

            }           
        }

</script>

车身

<body>
    <div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272">
   </div>
</body>

XML

<NewDataSet>
  <imgtable>
    <PhotoId>4</PhotoId>
    <Name>Photo4</Name>
    <ImageUrl>photoalbum/DSCN5798.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:02+05:30</Date>
  </imgtable>
  <imgtable>
    <PhotoId>5</PhotoId>
    <Name>Photo5</Name>
    <ImageUrl>photoalbum/DSCN5799.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:13+05:30</Date>
  </imgtable>
  <imgtable>
    <PhotoId>6</PhotoId>
    <Name>Photo6</Name>
    <ImageUrl>photoalbum/DSCN5800.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:13+05:30</Date>
  </imgtable>
</NewDataSet>

呈现HTML

<body>
    <form method="post" action="gallery.aspx?albumid=2" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="5WcBQJLHmIC4X/c0os4kFsh4tUCcOP93YgL5uIChec+tPgpqBaWkU5jZaSmvwM4MMGjdK8G9LD+/HV8GvINckwe5HGGXFcY7BgEpkFo0CEM=" />
</div>     
    <div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272"></div>
    </form>
</body>

Answer 1

window.onload = GetRecords();出现问题 - 应该是window.onload = GetRecords;。

同样在ajax请求中，您说响应为json，但在成功回调中，它会被处理为XML

但是在jQuery中你也可以使用dom来实现相同的

jQuery(GetRecords)

当您使用window.onload = GetRecords(); GetRecords执行时，返回的值被指定为onload处理程序，这不是所需的。加载窗口后需要调用GetRecords，因为您需要使用window.onload将函数引用传递给window.onload = GetRecords;

尝试

jQuery(GetRecords)

function GetRecords() {
    $.ajax({
        type : "POST",
        url : "Gallery.aspx/insertimg",
        contentType : "application/json; charset=utf-8",
        dataType : "xml",
        success : OnSuccess,
        failure : function(response) {
            alert(response.d);
        },
        error : function(response) {
            alert(response.d);
        }
    });
}

function OnSuccess(response) {

    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var count = parseInt(xml.find("imgtable").length);
    var imageTable = xml.find("imgtable");

    for (var i = 0; i < count; i++) {
        var hrf = imageTable.find("ImageUrl").eq(i).text();
        var s = '<a href=' + hrf + '><img src=' + hrf + 'alt="Tulips"></a>';
        $('.html5gallery').append(s);

    }
}

无法动态地将HTML元素附加到div

1 个答案: