HTML 내용과 텍스트 내용을 지정된 위치에 삽입하는 방법

저자：Eve Cole 업데이트 시간：2025-01-24 12:00:03

dhtml은 insertAdjacentHTML과 insertAdjacentText라는 두 가지 추가 메소드를 제공합니다.

insertAdjacentHTML 메소드: 지정된 위치에 html 태그 명령문을 삽입합니다.

프로토타입: insertAdjacentHTML(swhere,stext)

매개변수:

swhere: html 태그 문이 삽입되는 위치를 지정합니다. 사용 가능한 값은 4가지입니다.

1.beforeBegin: 라벨 시작 전에 삽입

2.afterBegin: 라벨 시작 태그 뒤에 삽입

3.beforeEnd : 태그의 종료태그 앞에 삽입

4.afterEnd : 라벨의 종료태그 뒤에 삽입

stext: 삽입할 내용

예:

다음과 같이 코드 코드를 복사합니다.

var sHTML="<input type=button go2()" + " value='클릭하세요'><BR>"

var sScript='<스크립트 연기>'

sScript = sScript + 'function go2(){ Alert("삽입된 스크립트에서 안녕하세요.") }'

sScript = sScript + '</script' + '>';

ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);

HTML 본문에 한 줄을 추가합니다.

결국 다음과 같이 됩니다.

다음과 같이 코드 코드를 복사합니다.

<입력 유형=버튼 onclick=go2() value='클릭하세요'><BR>

<스크립트 연기>

function go2(){alert("삽입된 sctipt에서 안녕하세요.")}'

</script>

</DIV>

insertAdjacentText 메소드는 일반 텍스트만 삽입할 수 있고 동일한 매개변수를 갖는다는 점을 제외하면 insertAdjacentHTML 메소드와 유사합니다.

이 두 속성은 특히 그리기 및 기타 장소에서 적용 가능하며, 원본 콘텐츠를 덮어쓰지 않는다는 장점이 있습니다. 이제 콘텐츠를 덮어쓰지 않고 동적으로 추가해야 합니다. 원본 콘텐츠이므로 현재로서는 매우 중요합니다. innerHTML은 원본 콘텐츠를 덮어씁니다.

쌍으로 나타나는 모든 HTML은 innerHTML과 동일한 이 속성을 사용할 수 있습니다. 예를 들어 <body>..</body>, <div>....</div> 등은 모두 이 두 가지 속성을 갖습니다. .

보충: 방금 시도했는데 innerHTML 속성은 읽기 및 쓰기 가능합니다. 예전에는 innerHTML이 노드에 콘텐츠를 삽입할 수 있다는 것을 알고 있었지만 이 속성도 읽기 가능합니다. 이는 innerHTML이 노드의 HTML 콘텐츠를 저장한다는 의미입니다. 다음 코드를 따라 완전히 이해하십시오.

다음과 같이 코드 코드를 복사합니다.

<html>

<머리>

</head>

<본문>

safdsdaf 시간에 맞춰 장소

<스크립트 언어="자바스크립트">

경고(document.body.innerText)

</script>

</body>

</html>

위의 내용은 제가 다른 사람에게 전달한 코드입니다. 아래에 몇 줄을 더 추가하겠습니다. 이 코드도 매우 고전적일 수 있습니다.

다음과 같이 코드 코드를 복사합니다.

<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">

함수 추가파일()

{

var filebutton = '<br><input type="file" size="50" name="파일" />';

document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton);

}

</script>

위는 Head의 스크립트이고, 다음은 Body의 html 코드입니다.

다음과 같이 코드 코드를 복사합니다.

</p>

코드를 파일에 복사하고 html로 저장하면 효과를 확인할 수 있습니다.