Question

您好我的简单代码。我想在元素function add(src){}中显示main_container中创建的图片。为什么它不起作用？

 <head>
 </head>

 <body>

  <style>

#main_container
{
 width:1000px;
 height:1000px;
 position:absolute;
 border-style:solid;
}

.jersey
{
 width:100px;
 height:150px;
 position:absolute;
}

  </style>

<script>
var dist=-110;

function add(src)
{
  dist=dist+110;

 var img=document.createElement("img");
 img.src=src;
 img.style.left=dist+"px";
 img.className="jersey";

 document.getElementById("main_container").appendChild(img);
}

  add("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg");

</script>

 <div id="main_container"></div>

 </body>

</html>

Answer 1

将脚本标记移动到元素下方。

变化：

<script>...</script>
<div id="main_container"></div>

要：

<div id="main_container"></div>
<script>...</script>

浏览器从上到下读取HTML。

Answer 2

beautifulcoder的建议修改应该有效，并且他绝对正确发生这种情况，因为main_container DOM元素如果出现在<script>之后仍未加载，但理想情况下，你应该推迟进行DOM操作，直到文档加载完毕。您可以使用window.onload事件执行此操作：

<script>
    function add(src) {
       ...
    }

    function initialize() {
        add("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg");
    }

    window.onload = initialize;
</script>
<div id="main_container"></div>

甚至更好，使用jQuery＆＃39; ready事件：

function initialize() {
    add("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg");
}

$(document).ready(initialize);

//   $(initialize);   <- Shorthand version

这些方法中的任何一种都可以让您不必担心脚本块相对于页面元素的位置。

Javascript-创建元素作为另一个元素的子元素

2 个答案: