[html] DOM에 HTML 문자열 추가
이 HTML 문자열을 추가하는 방법
var str = '<p>Just some <span>text</span> here</p>';
ID가있는 DIV에 'test'
DOM에있는 ?
(Btw div.innerHTML += str;
는 허용되지 않습니다.)
답변
사용 insertAdjacentHTML
이 가능한 경우는 true, 그렇지 않은 경우는 대체 어떤 종류를 사용합니다. insertAdjacentHTML 은 현재의 모든 브라우저에서 지원됩니다 .
div.insertAdjacentHTML( 'beforeend', str );
라이브 데모 : http://jsfiddle.net/euQ5n/
답변
이것이 허용됩니까?
var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);
jsFiddle .
그러나 , 닐의 대답은 더 나은 솔루션입니다.
답변
공연
AppendChild
(E)는 크롬 및 사파리의 다른 솔루션보다 2 배 이상 빠르며, insertAdjacentHTML
(F)는 파이어 폭스에서 가장 빠릅니다. innerHTML=
(B) (와 혼동하지 마십시오+=
) A는 () 모든 브라우저에서 두 번째 빠른 솔루션이며 E와 F보다 훨씬 더 편리합니다
세부
환경 설정 (2019.07.10) Chrome 75.0.3770 (64 비트), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 비트)에서 MacOs High Sierra 10.13.4
- Chrome E (초당 140k 작업)가 가장 빠르고 B (47k) 및 F (46k)가 초, A (332)가 가장 느립니다.
- 파이어 폭스에서 F (94k)가 가장 빠르며 B (80k), D (73k), E (64k), C (21k) 가장 느림은 A (466)입니다.
- Safari E (207k)에서 가장 빠르고 B (89k), F (88k), D (83k), C (25k), 가장 느린 것은 A (509)
답변
아이디어는 innerHTML
중간 요소에서 사용한 다음 모든 자식 노드를를 통해 원하는 위치로 이동하는 것 appendChild
입니다.
var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';
var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
target.appendChild(temp.firstChild);
}
이것은 이벤트 핸들러를 지우는 것을 방지 div#test
하지만 여전히 HTML 문자열을 추가 할 수 있습니다.
답변
올바른 방법은 insertAdjacentHTML
. 8 이전의 Firefox에서는 태그 가 포함되지 않은 Range.createContextualFragment
경우 다시 사용할 수 str
있습니다 script
.
태그 str
가 포함 된 경우 조각 을 삽입하기 전에에서 반환 한 조각에서 요소 script
를 제거해야합니다 . 그렇지 않으면 스크립트가 실행됩니다. ( 스크립트를 실행할 수 없음으로 표시합니다.)script
createContextualFragment
insertAdjacentHTML
답변
빠른 해킹 :
<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>
사용 사례 :
1 : .html 파일로 저장하고 chrome, firefox 또는 edge에서 실행합니다. (IE는 작동하지 않습니다)
2 : http://js.do 에서 사용
실행 중 :
http://js.do/HeavyMetalCookies/quick_hack
주석으로 분류 :
<script>
//: The message "QUICK_HACK"
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";
//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad,
//: it should be visible.
var child = document.children[0];
//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;
</script>
내가 게시 한 이유 :
JS.do에는 두 가지 필수 항목이 있습니다.
- 자동 완성 없음
- 수직 모니터 친화적
그러나 console.log 메시지는 표시되지 않습니다. 빠른 해결책을 찾기 위해 여기에 왔습니다. 스크래치 패드 코드 몇 줄의 결과를보고 싶을 뿐이고 다른 솔루션은 작업이 너무 많습니다.
답변
왜 허용되지 않습니까?
document.getElementById('test').innerHTML += str
그것을하는 교과서 방식 일 것입니다.