[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)

여기 에서 컴퓨터 에서 테스트를 재생할 수 있습니다.

코드 스 니펫 표시

function A() {
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {
  var p = document.createElement("p");
  var s = document.createElement("span");
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself.
<div id="container"></div>

스 니펫 확장

답변

아이디어는 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를 제거해야합니다 . 그렇지 않으면 스크립트가 실행됩니다. ( 스크립트를 실행할 수 없음으로 표시합니다.)scriptcreateContextualFragmentinsertAdjacentHTML

답변

빠른 해킹 :

<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

그것을하는 교과서 방식 일 것입니다.