无法将HTML元素动态添加到div

Question

I am trying to add html elements to a div dynamically but i am unable to do so at all. 我正在尝试将html元素动态添加到div中，但是我根本无法这样做。 I replaced var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>'; 我替换了var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>'; with var s = '<button>click</button>'; 使用var s = '<button>click</button>'; just to check if there is anything wrong with the string i am appending and still no luck. 只是要检查我附加的字符串是否有问题，仍然没有运气。

Script in Head 头文字

   <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 身体

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

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

Rendered HTML 呈现的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

You have a problem in window.onload = GetRecords(); 您在window.onload = GetRecords();有问题window.onload = GetRecords(); - it should be window.onload = GetRecords; -应该是window.onload = GetRecords; . 。

Also in the ajax request you are saying the response is json but in the success callback it is processed as XML 同样在ajax请求中，您说响应是json但是在成功回调中，它被处理为XML

But in jQuery you can use the dom ready also to achieve the same 但是在jQuery中，您也可以使用dom ready来实现相同的功能

jQuery(GetRecords)

When you use window.onload = GetRecords(); 当您使用window.onload = GetRecords(); the GetRecords executed and the value returned is assigned as the onload handler, which is not what is needed. 执行GetRecords并将返回的值分配为onload处理程序，这不是必需的。 What is needed is GetRecords to be called once the window is loaded for that you need to pass the function reference to window.onload using window.onload = GetRecords; 所需要的是，在加载窗口后将调用GetRecords ，因为您需要使用window.onload = GetRecords;将函数引用传递给window.onload window.onload = GetRecords;

Try 尝试

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 个解决方案

解决方案1
1 2013-08-01 10:17:58

无法将HTML元素动态添加到div

问题描述

1 个解决方案

解决方案1 1 2013-08-01 10:17:58

解决方案1
1 2013-08-01 10:17:58