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

StackOverflow https://stackoverflow.com/questions/121817

  •  02-07-2019
  •  | 
  •  

質問

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 スニペット、またはを定義する JavaScript オブジェクトをサポートするメソッド。 toString 方法。

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

他のヒント

単純に次のように使用できます。

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.';

Prototype の優れた機能の 1 つは、 $('field_name') と同じことをします document.getElementById('field_name'). 。これを使って！:-)

プロトタイプを使用したジョン・トップリーの答え update function も良い解決策です。

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

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

次のように簡単になります。$("#フィールド名").text("新しいテキスト。");

構造を想定できない場合はInnerTextを使用します - テキスト＃データを使用して既存のテキストを更新します性能テスト

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"));
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top