반응형
자바 스크립트로 div에 img 요소 추가
placehereJavaScript를 사용 하여 div에 img를 추가하려고 하지만 운이 없습니다. 누구든지 내 코드를 도와 줄 수 있습니까?
<html>
<script type="text/javascript">
var elem = document.createElement("img");
elem.setAttribute("src", "images/hydrangeas.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild("elem");
</script>
<body>
<div id="placehere">
</div>
</body>
</html>
document.getElementById("placehere").appendChild(elem);
아니
document.getElementById("placehere").appendChild("elem");
아래를 사용하여 소스를 설정하십시오.
elem.src = 'images/hydrangeas.jpg';
그것은해야한다:
document.getElementById("placehere").appendChild(elem);
그리고 div를 javascript 앞에 두십시오. 그렇지 않으면 div가 존재하기 전에 javascript가 실행되기 때문입니다. 또는로드 될 때까지 기다리십시오. 따라서 코드는 다음과 같습니다.
<html>
<body>
<script type="text/javascript">
window.onload=function(){
var elem = document.createElement("img");
elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild(elem);
}
</script>
<div id="placehere">
</div>
</body>
</html>
내 요점을 증명하려면 onload 와 함께 이것을보고 onload 없이 이것을보십시오 . 콘솔을 시작하면 div가 존재하지 않거나 null의 appendChild 메서드를 찾을 수 없다는 오류가 표시됩니다.
function image()
{
//dynamically add an image and set its attribute
var img=document.createElement("img");
img.src="p1.jpg"
img.id="picture"
var foo = document.getElementById("fooBar");
foo.appendChild(img);
}
<span id="fooBar"> </span>
참고 URL : https://stackoverflow.com/questions/7802744/adding-an-img-element-to-a-div-with-javascript
반응형
'IT Share you' 카테고리의 다른 글
| jQuery DataGrid 플러그인을 선택 하시겠습니까? (0) | 2020.12.08 |
|---|---|
| if ($ variable)은 정확히 어떻게 작동합니까? (0) | 2020.12.08 |
| Git에서 '--no-ff'병합 옵션을 사용하는 경우 (0) | 2020.12.08 |
| PHP Curl 라이브러리를 사용하는 영구 / 유지 HTTP? (0) | 2020.12.08 |
| Android에서 외부 글꼴 사용 (0) | 2020.12.08 |