.insertadjacenthtml() 메소드를 사용하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

요약: .insertadjacenthtml() 사용법에 대한 온라인 정보가 거의 없습니다. 다음은 모든 사람을 위한 특정 참조 가치가 있는 PHP 중국어 웹사이트에서 편집한 튜토리얼입니다!

insertAdjacentHTML 및 insertAdjacentText는 매우 유연한 방법이며 지정된 위치에 HTML 콘텐츠와 텍스트 콘텐츠를 삽입할 수 있습니다. 대부분의 경우 element.innerHTML보다 성능이 뛰어나고 문서 조각이 더 나은 HTML 문서 삽입 솔루션입니다. IE의 일부 버전에서는 제대로 작동하지 않습니다.

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

insertAdjacentHTML 및 insertAdjacentText 메소드:

IE의 DHTML 객체는 페이지 요소의 내용을 동적으로 조작하기 위해 읽기 및 쓰기 가능한 4가지 속성을 제공합니다: innerText, externalText, innerHTML, externalHTML. 1. innerText 및 externalText 속성의 값은 HTML 태그가 포함되어 있어도 일반 텍스트로 표시되지만 innerHTML, externalHTML은 HTML 엔진에 의해 분석된 텍스트를 표시합니다. 속성의 HTML.

2. 객체의 externalText 및 externalHTML 속성에 값(예: 쓰기 작업)을 할당하면 객체가 삭제됩니다. 위 네 가지 속성의 할당 작업은 원본 개체의 텍스트 내용만 대체합니다. 페이지에서 지정된 요소의 해당 위치에 텍스트 내용을 추가하려면 insertAdjacentHTML 및 insertAdjacentText 메서드를 사용해야 합니다. 형식은 다음과 같습니다.

object.insertAdjacentText(sWhere, sText)

로그인 후 복사

object.insertAdjacentHTML(sWhere, sText)

로그인 후 복사

여기서 sWhere는 html 태그를 기준으로 삽입된 텍스트의 위치를 나타냅니다. 4가지 사전 설정 값이 있습니다:

beforeBegin, afterBegin, beforeEnd, afterEnd

다음 사항에 유의하세요. using:

1. 이 두 가지 방법은 전체 문서가 로드된 후에 사용해야 합니다. 그렇지 않으면 오류가 발생합니다.

2. InsertAdjacentText는 일반 텍스트만 삽입할 수 있고, InsertAdjacentHTML은 html 형식의 텍스트를 삽입할 수 있습니다. 3. InsertAdjacentHTML을 사용하여 스크립트를 삽입할 때 스크립트 요소에 defer 속성을 사용해야 합니다. 그렇지 않으면 스크립트 중에 런타임 오류가 발생합니다. 실행

4.InsertAdjacentHTML은 html 요소를 삽입하며, 모든 요소 컬렉션 및 기타 요소 컬렉션은 동적 변경 사항을 반영하기 위해 자동으로 업데이트됩니다. 예를 들어 페이지에 있는 후속 요소의 sourceIndex 속성이 변경됩니다.

5. 잘못된 HTML 태그에 InsertHTML/outerHTML 속성을 할당하면 이 메서드로 인해 런타임 오류가 발생할 수 있습니다. 예를 들어 다음 코드는 오류를 발생시킵니다.

   <BODY>
      <p id=pdiv></p>
      <SCRIPT LANGUAGE="javascript">
           pdiv.innerHTML = "<p>hello</p>"
      </SCRIPT>
      </BODY>

로그인 후 복사

또한 페이지 콘텐츠를 동적으로 운영할 때 다음 사항에 주의해야 합니다.

1. 문서 BODY에 표시된 콘텐츠만 동적으로 변경할 수 있습니다. 위의 속성과 메소드에 의해 BODY 객체의 내용은 동적으로 변경될 수 있지만 BODY 객체 자체는 교체될 수 없습니다.

2. 위의 속성과 메서드는 input, img와 같은 빈 태그(콘텐츠가 없는 html 태그)에서는 작동할 수 없습니다. 3. 테이블 개체의 경우 td(innerHTML/innerText) 및 테이블(outerHMTL/outerText) 개체만 특정 속성을 사용하여 콘텐츠를 바꾸거나 삽입할 수 있습니다. tr 및 tbody와 같은 다른 테이블 개체는 이러한 속성을 사용하여 콘텐츠를 변경할 수 없습니다.

HTML 콘텐츠와 텍스트 콘텐츠를 추가하려면 innerHTML 및 innerText 메서드를 사용하곤 했습니다. 최근에는 insertAdjacentHTML 및 insertAdjacentText 메서드가 더 유연하고 지정된 위치에 HTML 콘텐츠와 텍스트 콘텐츠를 삽입할 수 있다는 사실을 발견했습니다. . insertAdjacentHTML 메소드: 지정된 위치에 html 태그 문을 삽입합니다.

.insertadjacenthtml() 메소드를 구체적으로 사용하는 방법은 무엇입니까?

Prototype: insertAdajcentHTML(swhere,stext)

Element.insertAdjacentHTML 메소드는 HTML 문자열을 구문 분석합니다. 그런 다음 생성된 노드가 지정된 위치의 DOM 트리에 삽입됩니다.

element.insertAdjacentHTML(position, text);

로그인 후 복사

이 메서드는 두 개의 매개 변수를 허용합니다. 첫 번째는 지정된 위치이고 두 번째는 구문 분석할 문자열입니다.

매개변수:

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

1. beforeBegin:

태그 시작 앞에 삽입

시작 태그 뒤에 삽입

3. beforeEnd:

태그 끝 태그 앞에 삽입

4. afterEnd:

태그 끝 태그 뒤에 삽입

// 原来的HTML代码：<div id="one">one</div>
var d1 = document.getElementById(&#39;one&#39;);
d1.insertAdjacentHTML(&#39;afterend&#39;, &#39;<div id="two">two</div>&#39;);
// 现在的HTML代码：
// <div id="one">one</div><div id="two">two</div>

로그인 후 복사

참고:

이 방법은 완전히 대체되지 않습니다. 기존 DOM 구조를 innerHTML 작업보다 훨씬 빠르게 수행합니다.

본문 : 삽입할 내용

<html>
<head>
<script language="javascript">
function myfun()
{
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name=/"txt1/">");
}
</script>
</head>
<body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()">
</body>
</html>

로그인 후 복사

==========================

<head>
<title>24.htm insertAdjacentHTML插入新内容</title>
<script language="jscript">
function addsome()
{
document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容</h1>");
document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>");
document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>");
document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
}
</script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color=’#ff00ff’">原来的内容</div><hr>
</body>
</html>

로그인 후 복사

===== = ========================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<script>
var num=0;
var No_sys=0;function Add_button(){
if(No_sys<8){
c_input.insertAdjacentHTML("beforeEnd","<div id=/"bar"+num+"/" oncontextmenu=/"Remove_button(bar"+num+");return false/" style=/"background:red;width:40;height:20/">"+num+"</div>");
num++;
No_sys++;
}
}function Remove_button(obj){
obj.removeNode(true);
No_sys--;
}
</script>
<input type="button" onclick="Add_button()" value="动态加">
<input type="button" onclick="alert(c_input.innerHTML)" value="看">
<div id="c_input">
</div> 
</BODY>
</HTML>

로그인 후 복사

사용법:

<div id="test">
<span style="color:red">test1</span> test2
</div>

로그인 후 복사

JS에서 사용할 수 있습니다:

test.innerHTML:

로그인 후 복사

즉, 모두에서 Html 태그를 포함하여 개체의 시작 위치부터 끝 위치까지의 내용입니다.

위 예에서 test.innerHTML 값은 시작 위치에서 끝 위치까지

“<span style="color:red">test1</span> test2 ”

로그인 후 복사

test.innerText:

로그인 후 복사

이지만 Html 태그가 제거되었습니다.

위 예에서 text.innerTest 값도 "test1 test2"입니다. 범위 태그가 제거된 곳.

test.outerHTML:

로그인 후 복사

innerHTML의 전체 내용을 포함하는 것 외에도 객체 태그 자체도 포함합니다.

위 예의 text.outerHTML 값도

<div id="test"><span style="color:red">test1</span> test2</div>

로그인 후 복사

전체 예:

<div id="test">
<span style="color:red">test1</span> test2
</div>
innerHTML内容
inerHTML内容
outerHTML内容

로그인 후 복사

특별 참고 사항:

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById(&#39;test&#39;).innerHTML.replace(/<.+?>/gim,&#39;&#39;))">无HTML,符合W3C标准</a>

로그인 후 복사

위 내용은 .insertadjacenthtml() 메소드를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!