48

編集：うわー。この質問は現在12歳です。

誰かが述べたように、2016 年以降はワンライナーで実行できます: https://stackoverflow.com/a/69322509/80907

オリジナル：

innerHTML を使用せずに HTML のテキストを変更する方法があるかどうか疑問に思っています。

私が尋ねている理由は、それが W3C にちょっと嫌われているからです。私はそれがつまらないことを知っていますが、知りたいのですが、方法はありますか?

編集: 人々は私がここで尋ねていることを誤解しているようです: 表示されているテキストを効果的に変更する方法を見つけたい.

私が持っている場合：

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

innerHTML を使用すると、次のことができます。

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

画面上のテキストが変更されます。
テキストを追加するのではなく、既存のテキストを変更したい。

4

13 に答える 13

46

推奨される方法は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]);

しかし、他の誰かが言ったように、代わりにjQueryのようなものを使用することをお勧めします。すべてのブラウザーがDOMを完全にサポートしているわけではなく、JavaScriptライブラリーによって内部的に処理される癖があるブラウザーです。たとえば、jQueryは次のようになります。

$('#someID').html("<p>Hello, <b>World</b>!</p>");
于 2009-04-05T00:20:32.303 に答える
14

それを行うためのより良い方法は、を使用することdocument.createTextNodeです。代わりにこの関数を使用する主な理由の1つはinnerHTML、すべてのHTML文字のエスケープが自動的に処理されるのに対し、単に設定する場合は文字列を自分でエスケープする必要があることですinnerHTML。

于 2009-04-05T00:17:49.313 に答える
9

DOMを操作しても同じ効果が得られます。テキストを変更する最も安全な方法は、要素のすべての子ノードを削除し、それらを新しいテキストノードに置き換えることです。

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

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

子ノードを削除すると、要素のテキストコンテンツが削除されてから、新しいテキストに置き換えられます。

ほとんどの開発者がinnerHTMLの使用を避ける理由は、DOMを介した要素へのアクセスが標準に準拠しているためです。

于 2009-04-05T03:30:00.663 に答える
7

プレーンテキストのみを変更したい場合は、標準に依存するより迅速なソリューションがあります。

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

とにかく、innerHTMLは今後のHTML5標準の一部になることに注意してください。

于 2009-04-05T17:25:43.057 に答える
5

単純。

に置き換えtext.innerHTML = 'two'ますtext.firstChild.nodeValue = 'two'。

于 2010-11-28T12:07:39.710 に答える
3 
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) で機能するという利点があります。

于 2009-04-06T14:08:04.897 に答える
2

これは非常に古い質問です。

さて、状況は変わりました：

element.innerText = "Hi There!"

ワンライナー。2016 年以降、すべてのブラウザがこれをサポートしています。

于 2021-09-25T01:38:48.153 に答える
1

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やPrototypeなどのフレームワークやその他の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>
于 2009-04-05T00:23:32.577 に答える
1

CSS + HTML + JS の組み合わせで望ましい効果が得られるように思えます。

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

...

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

...

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

これが実際に機能するかどうかは誰にもわかりますか？

于 2009-06-16T10:02:48.540 に答える
0

定期的に更新する場合は、テキスト ノードへの直接参照を保存すると役立つことがあります。私はこのようなことをします：

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

そして、更新する必要があるときはいつでも、これを行うだけです：

dynamicText.nodeValue = "the updated text";

これにより、DOM をたどったり、子を追加または削除したりする必要がなくなります。

于 2013-10-10T13:18:44.460 に答える