web-dev-qa-db-ja.com

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
}
javascripthtmldom
152
sblundy

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

$("field_name").update("New text");
46
John Topley

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

fieldNameElement.innerHTML = "My new text!";
239
17 of 26

2013年以降にこれを読んでいるすべての人のために更新されました：

この答えにはたくさんのSEOがありますが、すべての答えは非常に古くなっており、現在のすべてのブラウザがそのまま使えるようにライブラリに依存しています。

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

fieldNameElement.textContent = "New text";
151
mikemaccana

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でも変数名でもありません。

74
Daniel Papasian
$('field_name').innerHTML = 'Your text.';

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

Prototypeのupdate関数を使用したJohn Topleyの回答は別の良い解決策です。

17
ceejayoz

簡単な答えは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を使用できます。これは完全な解決策ではありませんが、rawでinnerHTMLを使用しているわけではありません。

15
AnthonyWJones

あなたが本当にあなたが中断したところから続けてほしいのなら、あなたはそうすることができます：

if (fieldNameElement)
    fieldNameElement.innerHTML = 'some HTML';
6
Milan Babuškov

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

function showPanel(fieldName) {
  var fieldNameElement = document.getElementById(field_name);
  if(fieldNameElement.firstChild)
    fieldNameElement.firstChild.nodeValue = "New Text";
}
4
palswim
el.innerHTML='';
el.appendChild(document.createTextNode("yo"));
3
Adrian Adkison

あなたのサイトでたくさんのJavaScriptを使い始めるのであれば、jQueryはDOMを使うことを非常に簡単にします。

http://docs.jquery.com/Manipulation

$（ "＃field-name"）。text（ "Some text"）;と同じくらい単純にします。

1
Steve Perks

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

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

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

これは簡単な jQuery のやり方です：

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

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