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
}
以下を簡単に使用できます。
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));
}
このようにする利点：
JavaScript ライブラリを使用する場合は、jQuery を使用して次のようにします。
$("div#field_name").text(fieldName);
@AnthonyWJones のコメントは正しいことに注意してください。「field_name」は、特に説明的な ID または変数名ではありません。
updateプレーン テキスト、HTML スニペット、またはメソッドを定義する任意の JavaScript オブジェクトをサポートするプロトタイプのメソッドを使用しますtoString。
$("field_name").update("New text");
$('field_name').innerHTML = 'Your text.';
Prototype の気の利いた機能の 1 つは$('field_name')、 と同じことを行うことdocument.getElementById('field_name')です。これを使って！:-)
updatePrototype の関数を使用した John Topley の回答は、もう 1 つの優れたソリューションです。
簡単な答えは、innerHTML (またはほとんど同じことのプロトタイプの update メソッド) を使用することです。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.");
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"));