Question

我已经搜索了很多这个，但我没有任何具体的相关的问题，我想动态添加一个div到我的页面，但不是在另一个div内，但对DOM实际上意味着说div应该在我为标记创建的div旁边添加，但不在该标记内。这是我的代码

<html>
<head>

<title>example</title>


<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="jquery-1.9.1.js"></script>


<style type="text/css">

#map_canvas {
        width: 100%;
        height: 500px;
        background-color: #CCC;}

#menu_bar{
        width: 100%;
        height: 150px;
        position:absolute;
        bottom:0px;
        background-color:#008080;
        border-top:1px solid red;}

body{
        padding:0px;
        margin:0px;}




</style>
<!-- google maps Scripting start -->
<script type="text/javascript">

var markers = [];
 function initialize() {
  var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
        addMarker(event.latLng);
      });


    // add marker to positon
    function addMarker(location) {
         var marker = new google.maps.Marker({
                position: location,
                map: map
            });


    google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.open(map,marker);

        //this.setMap(null);
        });


            $( "body" ).on( "click", "#addNote", function(){

            $('#addNote').parent().parent().append("<div>new div</div>");
            });

            // adding infobox to gMaps

            var popup= '<div> <img src="img/edit.png" id="addNote"/>Add Note  <img src="img/gtk_close.png" id="delete_marker"/>Delete Marker   </div>';
                    var infowindow = new google.maps.InfoWindow({
                         content: popup
                    });

         markers.push(marker);
        }

    // Sets the map on all markers in the array.
        function setAllMap(map) {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);

          }
        }

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
<!-- google maps Scripting ends -->





</head>

<body>
<div id="map_canvas"></div>
<div id="menu_bar">




</div>



</body>
</html>

请帮我解决很多问题。

Answer 1

首先创建一个空白的div元素或任何元素，然后给它一些id。现在将此代码放在您的javascript文件

上

$("#givendivid").html('<div>Hello Testing</div>');

它将100％工作。但最好的选择是隐藏div，当你需要在那里显示时。

如何动态添加div

1 个答案: