>  기사  >  웹 프론트엔드  >  js 복사 또는 삽입 HTML 구현 방법 요약_javascript 기술

js 복사 또는 삽입 HTML 구현 방법 요약_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:26:57964검색

var bq=document.getElementsByTagName("Tag or ID name")//ID는 고유한 그룹이고 태그는 고유하지 않으며 배열이 반환될 수 있습니다.
div=document.createElement("div"); 🎜> ...CSS 스타일 설정
bq.appendChild(div); //ID 고유성을 위해 필요한 전부입니다! bq
bq[0].appendChild(div);//이전에 태그를 사용한 경우! 배열과 첨자! bq
bq.insertBefore(div);//이것이 ID 고유성에 필요한 전부입니다! bq
bq[0].insertBefore(div) 앞에 div 레이어를 삽입합니다.//태그가 이전에 사용된 경우! 배열과 첨자! bq

document.getElementById('navition').style.cssText = 'CSS 코드'
//div 복사
var bq=document.getElementById( " Copy")//ID는 허용되는 유일한 그룹화이며 레이블은 고유하지 않으며 배열을 반환할 수 있습니다.
objDiv=document.createElement("div");
objDiv.id=bq.id Copy;
objDiv.style.position="absolute"
objDiv.style.left="200px"
objDiv.style.top="200px"
objDiv.innerHTML=bq.innerHTML
bq .appendChild(objDiv)


test1 test2


test1 test2

JS에서 사용 가능:

test.innerHTML: 즉, Html 태그를 포함하여 개체의 시작 위치부터 끝 ​​위치까지의 전체 내용입니다.
위 예에서 test.innerHTML 값은

test1 test2
test1 test2


test.innerText: 시작 위치부터 끝 ​​위치까지의 내용이지만 Html 태그가 제거됩니다.
text.innerTest 값 위의 예도 역시 "test1 test2"이며, SPAN 태그가 제거되었습니다.


test.outerHTML: innerHTML의 전체 내용을 포함하는 것 외에도 객체 태그 자체도 포함합니다.
위 예에서 text.outerHTML 값은

test1 test2
test1 test2



전체 예:



코드 복사 코드는 다음과 같습니다.
test1 test2


innerHTML 콘텐츠
inerHTML 콘텐츠
외부 HTML 콘텐츠

test1 test2


innerHTML 콘텐츠

outerHTML 콘텐츠



특별 지침:

innerHTML은 W3C 표준을 준수하는 속성인 반면 innerText는 IE 브라우저에만 적용 가능합니다. 따라서 HTML 태그 없이 콘텐츠를 출력하려면
innerHTML을 최대한 많이 사용하고, innerText를 적게 사용하면 됩니다. innerHTML을 사용하여
HTML 태그가 포함된 콘텐츠를 가져온 다음 정규식을 사용하여 HTML 태그를 제거합니다. 다음은 W3C 표준을 준수하는 간단한 예입니다.



코드를 복사하세요 코드는 다음과 같습니다:
test1< /span> test2

HTML 없음, W3C 표준 준수

테스트1 테스트2




일부 관련 기사
javascript dom 작업 자세한 설명 js 향상