DOM에 HTML 문자열 추가

DOM에 HTML 문자열 추가

다음과 같은 HTML 문자열을 추가하는 방법

var str = '<p>Just some <span>text</span> here</p>';

에게<div>라는 아이디로test?

(Btw)div.innerHTML += str;허용되지 않습니다.)

현재 모든 브라우저에서 지원되는 기능 사용:

div.insertAdjacentHTML( 'beforeend', str );

위치 매개 변수beforeend요소의 마지막 자식 뒤에 요소 내부를 추가합니다.

라이브 데모: http://jsfiddle.net/euQ5n/

성능

AppendChild크롬과 사파리의 다른 솔루션보다 2배 이상 빠릅니다.insertAdjacentHTML파이어폭스에서 가장 빠릅니다.innerHTML=(와 혼동하지 않음)+=모든 브라우저에서 두 번째로 빠른 솔루션이며 E와 F보다 훨씬 편리합니다.

세부 사항

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)가 가장 느립니다.
• 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>

이것이 허용됩니까?

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFiddle.

하지만 닐의 대답이 더 나은 해결책입니다.

이 아이디어는 다음과 같습니다.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#testHTML 문자열을 추가할 수 있습니다.

올바른 방법은 사용하는 것입니다.insertAdjacentHTML8 이전의 Firefox에서는 다시 사용할 수 있습니다.Range.createContextualFragment만약 당신이str포함 안 함script꼬리표

만약 당신이str포함하다script태그, 제거해야 합니다.script에 의해 반환된 단편의 요소들createContextualFragment조각을 삽입하기 전에.그렇지 않으면 스크립트가 실행됩니다.insertAdjacentHTML스크립트를 실행할 수 없음으로 표시합니다.)

빠른 해킹:

---

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

---

사용 사례:

1: .html 파일로 저장하고 크롬, 파이어폭스 또는 엣지에서 실행합니다. (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 에는 다음과 같은 두 가지 필수 항목이 있습니다.

1. 자동 완성 안 함
2. 수직 모니터 친화적

그러나 console.log 메시지는 표시되지 않습니다.빠른 해결책을 찾고 싶어서 왔습니다.저는 단지 몇 줄의 스크래치 패드 코드의 결과를 보고 싶습니다. 다른 솔루션은 너무 많은 작업입니다.

이것은 해결할 수 있습니다.

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');

InnerHTML 기존 노드에 대한 모든 데이터 지우기 이벤트

첫 번째 자식을 추가합니다. 첫 번째 자식만 내부에 추가합니다.HTML. 예를 들어 다음과 같이 추가해야 합니다.

 <p>text1</p><p>text2</p>

텍스트 1만 표시됩니다.

다음은 어떻습니까?

내부에 특수 태그 추가하위 항목을 추가한 다음 외부 항목을 편집하는 HTMLHTML은 우리가 만든 태그를 삭제합니다.얼마나 똑똑한지는 모르겠지만 나에게 효과가 있거나 당신이 외부를 바꿀 수도 있습니다.HTML에서 내부로HTML을 사용할 필요가 없으므로 함수 바꾸기를 사용할 필요가 없습니다.

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
		
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}

<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>

왜 그것이 용납되지 않습니까?

document.getElementById('test').innerHTML += str

그것을 하는 교과서적인 방법일 것입니다.

제 질문에 대한 대답은 이것뿐이었습니다. 빈 값을 가진 간단한 지도; 그리고 제가 얻을 수 있는 것은 정확하지 않고 매우 무거운 대답뿐입니다.누가 내 질문을 끝냈는지 궁금해요...읽을 생각도 하지 않았습니다.

"use strict"
try{
  const fruits = new Map([["Banana",""],["Apples", ""], ["Orange"," "]]);

let text = "<h1>Fruits</h1>" + "<ul>";

fruits.forEach(function(value, key){
  text += "<li>" + key + value + "<br>" + "</li>" });

text +="</li> ";

document.getElementById('demo').innerHTML = text;
}
catch(err){
 document.getElementById('theError').innerHTML = err;
}

최단 - 18자(혼잡하지 않음)+=OP에 ) (OP에 의한 언급) 포함=자세한 내용은 여기)

test.innerHTML=str

var str = '<p>Just some <span>text</span> here</p>';

test.innerHTML=str

<div id="test"></div>

언급URL : https://stackoverflow.com/questions/7327056/appending-html-string-to-the-dom