InnerHtml 대안?

https://stackoverflow.com/questions/718091

23-08-2019
|

문제

InnerHTML을 사용하지 않고 HTML에서 무엇이든 텍스트를 변경할 수있는 방법이 있는지 궁금합니다.

내가 묻는 이유는 W3C에 의해 약간 눈살을 찌푸리기 때문입니다. 나는 그것이 nitpicking이라는 것을 알고 있지만, 나는 단지 알고 싶다, 방법이 있습니까?

편집 : 사람들은 내가 묻는 내용을 오해하는 것 같습니다. 표시되는 텍스트를 효과적으로 변경할 수있는 방법을 찾고 싶습니다.

만약 내가 가지고 있다면:

<div id="one">One</a>

innerhtml은 다음을 수행 할 수 있습니다.

var text = document.getElementsById("one");
text.innerHTML = "Two";

내 화면의 텍스트가 변경되었습니다.
더 많은 텍스트를 추가하고 싶지 않으며 기존 텍스트를 모두 변경하고 싶습니다.

해결책

권장되는 방법은 DOM 조작을 통해 이루어 지지만 상당히 장황 할 수 있습니다. 예를 들어:

// <p>Hello, <b>World</b>!</p>
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// <b>
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

편집하다

편집에 응답하여 현재 컨텐츠를 교체하기 위해 기존 컨텐츠를 제거한 다음 위의 코드를 사용하여 새 컨텐츠를 작성하십시오. 예를 들어:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

그러나 다른 사람이 말했듯이, 모든 브라우저가 DOM을 완전히 지원하는 것은 아니기 때문에 jQuery와 같은 것을 사용하는 것이 좋습니다. 예를 들어 jQuery는 다음과 같습니다.

$('#someID').html("<p>Hello, <b>World</b>!</p>");

다른 팁

더 좋은 방법은 사용하는 것입니다 document.createTextNode. 대신이 기능을 사용하는 주된 이유 중 하나입니다. innerHTML 모든 HTML 캐릭터 탈출이 당신을 위해 돌보는 반면, 단순히 설정하는 경우 스스로 스스로를 피해야 할 것입니다. innerHTML.

DOM을 조작하여 동일한 효과를 얻을 수 있습니다. 텍스트를 변경하는 가장 안전한 방법은 요소의 모든 자식 노드를 제거하고 새 텍스트 노드로 바꾸는 것입니다.

var node = document.getElementById("one");

while( node.firstChild )
    node.removeChild( node.firstChild );
node.appendChild( document.createTextNode("Two") );

자식 노드를 제거하면 새 텍스트로 교체하기 전에 요소의 텍스트 내용을 제거합니다.

대부분의 개발자가 InnerHTML을 사용하지 않는 이유는 DOM을 통해 요소에 액세스하는 것이 표준을 준수하기 때문입니다.

일반 텍스트 만 변경하려면 표준에 의존하는 빠른 솔루션이 있습니다.

document.getElementById("one").firstChild.data = "two";

어쨌든, InnerHTML은 다가오는 HTML 5 표준의 일부가 될 것입니다.

단순한.

바꾸다 text.innerHTML = 'two' ~와 함께 text.firstChild.nodeValue = 'two'.

var who=document.getElementById('one'), txt='new text';
if(who.innerText) who.innerText=txt;
else if(who.textContent) who.textContent= txt;

이것은 당신에게 내부적으로 불쾌감을 줄 수 있지만, 어떤 경우에는 어떤 경우 (즉, InnerHtml 또는 AppendChild가 일부 테이블 노드, 스타일 및 스크립트 요소의 텍스트 및 양식 필드의 가치가없는 경우에도 일할 수 있다는 이점이 있습니다.

DOM을 다음과 같이 사용할 수 있습니다.

<html>
<body>
<div>before</div>
<script type="text/javascript">
var element = document.getElementsByTagName("div")[0];
alert(element.firstChild.nodeValue);
element.removeChild(element.firstChild);
element.appendChild(document.createTextNode('after'));
alert(element.firstChild.nodeValue);
</script>
</body>

그러나 나는 누구나 이것을 거의하지 않지만 같은 프레임 워크를 사용한다고 생각합니다. jQuery 또는 원기 또는 다른 JavaScript 프레임 워크 거기 대신에. 이것은 jQuery 예입니다.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div>before</div>
<script type="text/javascript">
var element = $("div");
alert(element.text());
element.text("after");
alert(element.text());
</script>
</body>

CSS+HTML+JS 조합은 원하는 효과를 달성해야합니다.

.myelement:before {   
    content: attr(alt);
} 

...

<span class='myelement' alt='initial value'></span> 

...

element.setAttribute('alt', 'new value');

이것이 실제로 작동하는지 아는 사람이 있습니까?

글쎄, 당신의 질문을 제대로 이해한다면 이것은 답이되어야합니다.

var text = document.getElementById("one");
//text.innerHTML = "Two";
 text.childNodes[0].nodeValue="two";

또한 우회에 대한 좋은 대안을 찾고 있습니다 element.innerHTML 마침내 그 해결책을 찾았습니다.

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString('<template>'+html+'</template>', 'text/html').head;
    this.appendChild(dom.firstElementChild.content);
}

//-- document.getElementById('my-id').innerHTML = string_of_html;
document.getElementById('my-id').htmlContent(string_of_html);

없는 또 다른 대안u003Ctemplate> 태그이지만 대신 루프 :

HTMLElement.prototype.htmlContent = function(html)
{
    var dom = new DOMParser().parseFromString(html, 'text/html').body;
    while (dom.hasChildNodes()) this.appendChild(dom.firstChild);
}

이 메소드가 실제로 '컨텐츠를 교체 할 때'콘텐츠를 '추가'한다는 점을 명심하십시오.

이것은 도움이 될 수 있습니다 :

HTMLElement.prototype.clearContent = function()
{
    while (this.hasChildNodes()) this.removeChild(this.lastChild);
}

//-- document.getElementById('my-id').innerHTML = '';
document.getElementById('my-id').clearContent();

문서: https://github.com/swannty/escaping-nnerhtml
perf : https://jsperf.com/escaping-nnerhtml

때로는 정기적으로 업데이트하려면 텍스트 노드에 대한 직접 참조를 저장하는 것이 도움이됩니다. 나는 다음과 같은 일을한다.

var dynamicText = myDiv.appendChild(document.createTextNode("the initial text"));

그런 다음 업데이트해야 할 때마다 다음을 수행합니다.

dynamicText.nodeValue = "the updated text";

이것은 DOM을 걷거나 어린이를 추가하거나 제거해야합니다.

insertAdjacenthtml ()는 갈 길입니다. 더 읽기 :문서를 보려면 클릭하십시오

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow