11

次のコードがあるとしましょう。

<html>
  <head></head>
  <body>
   <div id="d">some text</div>

  <script type="text/javascript">
    var d = document.getElementByid('d');
    var innerText = d.innerText || d.textContent;

    innerText = 'new text';
  </script>
  </body>
</html>

そして、id='d'のdivタグのテキスト値を変更したいと思います。残念ながら、上記のブロックコードは機能せず、テキストの内容は変更されません。

次のレシピを実行すると機能します。

if (d.innerText) d.innerText = 'new text';
else d.textContent = 'new text';

しかし、コンパクトではないので、上記のレシピは好きではありません。

最初のアプローチが機能しない理由について何か提案はありますか？

4

4 に答える 4

21

複数の割り当ての代わりに、プロパティを取得してそれを使用できます

var text = ('innerText' in d)? 'innerText' : 'textContent';
d[text] = 'New text';
于 2012-07-25T09:25:10.297 に答える
8

最初のアプローチは、変数を新しい値に設定するだけで、要素に値を書き込まないため、機能しません。この線

var innerText = d.innerText || d.textContent;

...変数innerTextを検出したテキストプロパティの値に設定します。実際のプロパティ自体への参照ではありません。

ブランチを実行する必要があります。例：

var d = document.getElementById('d');
var msg = "new text";
if ("innerText" in d) {
    d.innerText = msg;
}
else {
    d.textContent = msg;
}

その機能-ブラウザが使用しているかどうか、innerTextまたはtextContent要素のプロパティの存在を検索することによって検出します（これは、inオペレータが行うことです。オブジェクトに指定された名前のプロパティがあるかどうかを確認します。そのプロパティが空白、、などの場合でも同様nullですundefined。 ）。

あなたはそれのためにあなた自身に関数を書くことさえできます：

var setText = (function() {
    function setTextInnerText(element, msg) {
        element.innerText = msg;
    }

    function setTextTextContent(element, msg) {
        element.textContent = msg;
    }

    return "innerText" in document.createElement('span') ? setTextInnerText : setTextTextContent;
})();

これにより、機能の検出が1回行われ、適切なエンジンがインライン化される関数が返されます。

または、メッセージ内のHTMLマークアップを（文字通りのテキストではなく）マークアップとして処理する場合は、innerHTML（ブラウザー間で一貫している）を使用できます。ただし、を使用するinnerHTMLと、マークアップが処理されますが、これは希望どおりでない場合があります。

jQuery、YUI、Closure、またはその他のいくつかのブラウザーの違いに対処するために（そして、さらに多くの便利な機能を提供するために）、優れたJavaScriptライブラリーを使用すると便利だと思います。明らかに、図書館なしではできないことは何もありません。それは、すでに膨大な量の仕事をした人々の肩に立つことの問題です。:-)

この場合、たとえば、jQueryを使用すると、上記は次のようになります。

$("#d").text("new text");

それでおしまい。

于 2012-07-25T09:16:09.500 に答える
1 
d.appendChild(document.createTextNode("new text");
于 2014-08-08T10:35:56.960 に答える
1

使用できるのはtextContent1つだけで、主要なブラウザで動作します...（FF、Safari、Chrome）

var d = document.getElementById('d');
var msg = "new text";
d.textContent = msg;
于 2015-04-12T19:54:01.843 に答える