div要素内のテキストを置き換えるにはどうすればよいですか？

DIV要素内のテキストを動的に設定する必要があります。ブラウザを安全に使用するための最善の方法は何ですか？私はprototypejsとscriptaculousを利用できます。

<div id="panel">
  <div id="field_name">TEXT GOES HERE</div>
</div>

関数は次のようになります。

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById('field_name');
  //Make replacement here
}

updateプレーンテキスト、HTMLスニペット、またはtoStringメソッドを定義するJavaScriptオブジェクトをサポートするプロトタイプのメソッドを使用します。

$("field_name").update("New text");

• Element.updateドキュメント

あなたは単に使うことができます：

fieldNameElement.innerHTML = "My new text!";

2013年以降にこれを読むすべての人のために更新：

この回答には多くのSEOが含まれていますが、すべての回答は非常に古く、現在のすべてのブラウザがそのまま使用できることをライブラリに依存しています。

div要素内のテキストを置き換えるには、現在のすべてのブラウザーで提供されているNode.textContentを使用します。

fieldNameElement.textContent = "New text";

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById("field_name");
  while(fieldNameElement.childNodes.length >= 1) {
    fieldNameElement.removeChild(fieldNameElement.firstChild);
  }
  fieldNameElement.appendChild(fieldNameElement.ownerDocument.createTextNode(fieldName));
}

このようにすることの利点：

1. DOMのみを使用するため、この手法は他の言語に移植可能であり、非標準のinnerHTMLに依存しません。
2. fieldNameにはHTMLが含まれている可能性があり、これはXSS攻撃の試みの可能性があります。それが単なるテキストであることがわかっている場合は、ブラウザでHTMLを解析するのではなく、テキストノードを作成する必要があります。

JavaScriptライブラリを使用する場合は、jQueryを使用して、次のようにします。

  $("div#field_name").text(fieldName);

@AnthonyWJonesのコメントは正しいことに注意してください。「field_name」は、特に説明的なIDや変数名ではありません。

$('field_name').innerHTML = 'Your text.';

プロトタイプの気の利いた機能の一つは、それがある$('field_name')のと同じことをやっdocument.getElementById('field_name')です。これを使って！:-)

プロトタイプのupdate関数を使用したJohn Topleyの答えは、別の良い解決策です。

簡単な答えは、innerHTML（またはプロトタイプの更新メソッドとほぼ同じもの）を使用することです。innerHTMLの問題は、割り当てられているコンテンツをエスケープする必要があることです。ターゲットに応じて、他のコードでそれを行う必要がありますOR

IEで：-

document.getElementById("field_name").innerText = newText;

FF：-

document.getElementById("field_name").textContent = newText;

（実際にはFFには次のコードが存在します）

HTMLElement.prototype.__defineGetter__("innerText", function () { return this.textContent; })

HTMLElement.prototype.__defineSetter__("innerText", function (inputText) { this.textContent = inputText; })

可能な限り幅広いブラウザーサポートが必要な場合は、innerTextを使用できます。これは完全なソリューションではありませんが、innerHTMLをそのまま使用することもありません。

本当に中断したところから続行したい場合は、次のようにします。

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';

nodeValueは、使用できる標準のDOMプロパティでもあります。

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}

el.innerHTML='';
el.appendChild(document.createTextNode("yo"));

サイトで多くのJavaScriptを使い始めたい場合は、jQueryを使用すると、DOMの操作が非常に簡単になります。

http://docs.jquery.com/Manipulation

$（ "＃field-name"）。text（ "Some new text。"）;のように単純にします。

構造を想定できない場合はinnerTextを使用します-Text＃dataを使用して既存のテキストを更新します Performance Test

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);

  fieldNameElement.removeChild(fieldNameElement.firstChild);
  var newText = document.createTextNode("New Text");
  fieldNameElement.appendChild(newText);
}

簡単なjQueryの方法は次のとおりです。

var el = $('#yourid .yourclass');

el.html(el.html().replace(/Old Text/ig, "New Text"));

HTMLでこれを入れて

<div id="field_name">TEXT GOES HERE</div>

JavaScriptでこれを入れて

var fieldNameElement = document.getElementById('field_name');
        if (fieldNameElement)
        {fieldNameElement.innerHTML = 'some HTML';}