자바스크립트에서 사진을 추가하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 사진을 추가하는 방법

藏色散人

풀어 주다： 2021-06-26 14:05:06

원래의

5936명이 탐색했습니다.

JavaScript를 사용하여 이미지를 추가하는 방법: 먼저 createElement() 메서드를 사용하여 img 요소를 만든 다음 이미지의 URL 주소 값을 img 요소의 src 속성에 할당하고 마지막으로 addChild() 메서드를 사용합니다. img 요소를 지정된 dom 객체에 추가합니다.

자바스크립트에서 사진을 추가하는 방법

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트로 이미지를 추가하는 방법은 무엇인가요?

createElement() 메소드

createElement() 메소드는 이름을 지정하여 요소를 생성합니다.

구문:

document.createElement(nodename)

로그인 후 복사

매개변수: nodename: 필수. 요소의 이름을 만듭니다.

반환 값: 생성된 요소 노드

getElementById() 메서드

getElementById() 메서드는 지정된 ID를 가진 첫 번째 개체에 대한 참조를 반환합니다.

HTML DOM은 요소를 찾기 위한 여러 메서드를 정의합니다. getElementById() 외에도 getElementsByName() 및 getElementsByTagName()도 있습니다.

지정된 ID를 가진 요소가 없으면 null을 반환합니다.

지정한 ID를 가진 요소가 여러 개 있으면 정의되지 않음을 반환합니다.

구문:

document.getElementById(elementID)

로그인 후 복사

appendChild() 메서드

appendChild() 메서드는 노드의 하위 노드 목록 끝에 새 하위 노드를 추가합니다.

팁: 문서 트리에 newchild가 이미 있는 경우 문서 트리에서 제거되고 새 위치에 다시 삽입됩니다. newchild가 DocumentFragment 노드인 경우 직접 삽입되지는 않지만 해당 하위 노드는 현재 노드의 childNodes[] 배열 끝에 순서대로 삽입됩니다.

appendChild() 메서드를 사용하여 요소를 다른 요소로 제거할 수 있습니다.

구문:

node.appendChild(node)

로그인 후 복사

매개변수: 노드: 필수. 추가하려는 노드 개체입니다.

예: div 요소에 이미지를 추가하는 JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var bigImg = document.createElement("img"); //创建一个img元素
bigImg.src = "https://www.html.cn/static/images/logo.png"; //给img元素的src属性赋值
//bigImg.width="320";  //320个像素 不用加px
var myp = document.getElementById(&#39;myp&#39;); //获得dom对象
myp.appendChild(bigImg); //为dom添加子元素img
};
</script>
</head>
<body>
<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
</body>
</html>

로그인 후 복사

[권장: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 사진을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!