Javascript-innerHTML없이 컨테이너 요소에 HTML 추가

innerHTML을 사용하지 않고 컨테이너 요소에 HTML을 추가하는 방법이 필요합니다. innerHTML을 사용하고 싶지 않은 이유는 다음과 같이 사용하기 때문입니다.

element.innerHTML += htmldata

이전 HTML과 새 HTML을 추가하기 전에 모든 HTML을 먼저 대체하여 작동합니다. 내장 플래시 비디오와 같은 동적 미디어를 재설정하기 때문에 좋지 않습니다 ...

나는 이런 식으로 작동 할 수 있습니다.

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

그러나 그 방법의 문제는 문서에 불필요한 범위 태그가 있다는 것입니다.

그러면 어떻게 할 수 있습니까? 감사!

대안을 제공하려면 (사용 DocumentFragment이 효과가없는 것처럼 보입니다) : 새로 생성 된 노드의 하위 항목을 반복하여 시뮬레이션하고 추가 할 수 있습니다.

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

나는 그 대답 중 어느 것도 그 insertAdjacentHTML()방법을 언급하지 않은 것에 놀랐다 . 여기서 확인 하십시오 . 첫 번째 매개 변수는 문자열을 추가하고받는 위치입니다 ( "beforebegin", "afterbegin", "beforeend", "afterend"). OP의 상황에서는 "이전"을 사용합니다. 두 번째 매개 변수는 html 문자열입니다.

기본 사용법 :

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

alnafie는이 질문에 대한 훌륭한 답변을 가지고 있습니다. 참조를 위해 그의 코드의 예를주고 싶었습니다.

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}

body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}

<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

잘하면 이것은 다른 사람들에게 도움이됩니다.

<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

"+ ="기호로 div의 데이터를 할당하십시오. 이전 HTML 데이터를 포함하여 데이터를 추가 할 수 있습니다

이것은 DocumentFragment의도 된 것입니다.

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

어떻게 낚시를하는 과 엄격한 코드를 사용하는 동안. 이 게시물의 맨 아래에는 두 가지 필수 기능이 필요합니다.

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

여러 요소를 추가하십시오 (네임 스페이스는 상위 요소에만 있어야 함).

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

동적 재사용 가능 코드 :

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}