•  23-08-2019
  •  | 
  •  

質問

った場合性のあるテキストを変更しいHTMLを使用せずにinnerHTML.

理由のいかなのでちょっと延にW3C.この作品の講釈を、えーんあるのでしょうか。

編集：う誤解に思う。たいへeffectivly変更されているテキストの表示されます。

している場合は:

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

innerHTMLを可能にしているの:

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

のテキストも画面が変更されています。
いない追加の文字をい変化allready既存します。

役に立ちましたか？

解決

お勧めの方法は、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のようなものを使用することをお勧めします、とJavaScriptライブラリによって内部的に対処しているの癖を持っているものと思います。例えば、jQueryのは、次のようになります：

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

他のヒント

それを行うための良い方法は document.createTextNode に使用することです。この機能の代わりに、innerHTMLを使用する主な理由の一つは、あなたが単にinnerHTMLを設定した場合、あなたの文字列を自分で脱出しなければならないのに対し、すべてのHTML文字エスケープはあなたのための世話をされるということです。

あなたは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プロパティと同じくらい不快かもしれないが、それはいくつかのテーブルノードのように、innerHTMLのかは、appendChildにはないいくつかのケース（IE）での作業の利点を持ち、スタイルとスクリプト要素のテキストとフォームの値フィールド

を使用できる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');

これは実際に動作するかどうか、誰もが知っていますか？

さて、私はあなたの質問を理解してfを適切にこれが答えである必要があります。

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);
<テンプレート>タグのない

別の方法として、代わりにループます：

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

... innerHTMLのは、コンテンツを「交換する」ときに、この方法は、実際にコンテンツを「追加」することを覚えておいてください

これが役立つことがあります：

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

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

DOC： https://github.com/swannty/escaping-innerHTMLする
PERF： https://jsperf.com/escaping-innerhtmlする

私は時々、私はそれを定期的に更新するつもりです場合、それは便利テキストノードへの直接参照を格納するために見つけます。私はこのような何かをします：

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

そして、私はそれを更新する必要がある時はいつでも、その後、私はちょうどこの操作を行います。

dynamicText.nodeValue = "the updated text";

これは、DOMを歩いたり、子を追加または削除することがなくなります。

insertAdjacentHTML（）は、移動するための方法です。続きを読む： ドキュメントのクリック

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top