QA@IT

javascriptによる文字列を残したままタグの非表示

4796 PV

例えば

<a class='test'>対象</a>

という記述からaタグのみを削除orCSSを非表示にしたいです。
つまり、対象 を 対象
にしたいです。

どなたか教えてくれませんか?

  • 直接 a 要素を操作して希望のことができる方法は思いつきません。a 要素から「対象」という文字を抜き出して、それを、例えば、span 要素に適当なスタイルを設定して書き出し、もとの a 要素は style="display:none;" で非表示にするとかではダメですか? -
  • 局所的な質問だけでなく、全体のシナリオを含めてやりたいこと・何故そういうことがしたいのかも書いていただけると、別のもっと良い案がでてくるかもしれません。もし、質問者さんが初心者であればそうすることをお勧めします。 -

回答

idが無いので一意にその項目を取得することはできません。
その方法は考えてもらうとして、アイテムが取得できればouterHTMLを変更してしまえば可能です。

たとえば aタグがそのページに1つしかない場合であれば

document.getElementsByTagName("A")[0].outerHTML 
      = document.getElementsByTagName("A")[0].innerHTML;
var testAnchorElements = document.getElementsByTagName("A");

for(var i in testAnchorElements){
  testAnchorElements[i].outerHTML = testAnchorElements[i].innerHTML;
}

とすれば実現できると思います。純粋にテキストだけに差し替えたいのであれば右辺をinnerHTMLではなくinnerTextにしてください。


CSSを非表示というのが、classの解除だけで良いのであれば、
className属性をブランクにするという手もあります。

var testClassElements = document.getElementsByClassName("test");

for(var i in testClassElements){
  if(testClassElements[i].tagName.toUpperCase() == "A") {
    testClassElements[i].className = "";
  }
}

ただし、getElementsByClassName は一部のIEなどサポートされていないブラウザもありますので、
getElementsByTagNameでループさせるか、目的のタグにidを設定し一意に取得できるようにするなどしてください。

編集 履歴 (3)
  • この方法を使用しました!
    ありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。