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

你好，这里是我的简单代码。我想要显示在function add(src){}元素main_container中创建的图像。为什么它不工作？
Javascript-创建元素作为另一个元素的孩子

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

来源

2014-05-01 John Smith

移动元素下面的脚本标签。

变化：

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

要：

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

浏览器读取HTML从上到下。

来源

2014-05-01 15:38:12 beautifulcoder

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的ready事件：

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

$(document).ready(initialize); 

// $(initialize); <- Shorthand version

这些方法的执行将释放你不必担心您的脚本块相对于你的页面元素。

来源

2014-05-01 15:51:30 JLRishe

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

回答

相关问题