Javascript - 내부가 없는 컨테이너 요소에 HTML 추가HTML
inner를 사용하지 않고 컨테이너 요소에 HTML을 추가하는 방법이 필요합니다.HTML. inner를 사용하지 않는 이유HTML은 다음과 같이 사용되기 때문입니다.
element.innerHTML += htmldata
오래된 html과 새로운 html을 추가하기 전에 먼저 모든 html을 바꿈으로써 동작합니다.내장 플래시 비디오 등의 동적 미디어를 리셋하기 때문에 좋지 않습니다.
이렇게 하면 됩니다.
var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);
그러나 그 방법의 문제는 서류에 내가 원하지 않는 여분의 스판 태그가 있다는 것이다.
그럼 어떻게 할 수 있을까요?감사합니다!
어느 대답에도 다음 사항이 언급되어 있지 않은 것이 놀랍습니다.insertAdjacentHTML()
방법.여기 보세요.첫 번째 파라미터는 문자열이 추가 및 취득되는 위치("beforebegin", "afterbegin", "beforeend", "afterrend")입니다.OP의 상황에서는 "beforeend"를 사용합니다.두 번째 파라미터는 html 문자열뿐입니다.
기본 사용:
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');
대안을 제시하다(예: 사용)DocumentFragment
동작하지 않는 것 같습니다).새로 생성된 노드의 자식 위에 반복하여 이러한 노드만 추가하는 방법으로 시뮬레이션을 수행할 수 있습니다.
var e = document.createElement('div');
e.innerHTML = htmldata;
while(e.firstChild) {
element.appendChild(e.firstChild);
}
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>
이것이 다른 사람들에게 도움이 되기를 바란다.
이게 원래 목적이었어.
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
<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 데이터를 포함한 데이터를 추가할 수 있습니다.
낚시하는 방법과 엄격한 코드를 사용하는 방법.이 글의 말미에 필요한 두 가지 필수 기능이 있습니다.
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.
}
}
언급URL : https://stackoverflow.com/questions/6304453/javascript-append-html-to-container-element-without-innerhtml
'source' 카테고리의 다른 글
mysql 워크벤치 EER 열기 오류 (0) | 2022.10.15 |
---|---|
Larabel에서 이 작업을 수행하는 방법, 서브쿼리: (0) | 2022.10.15 |
데바운스 어떻게 해요? (0) | 2022.10.15 |
Java SE와 Java EE의 주요 차이점은 무엇입니까? (0) | 2022.10.15 |
외부 리액트 컴포넌트 클릭 검출 (0) | 2022.10.15 |