javascript - 子要素を置き換えずにDOM要素のテキストのみを変更する方法

Question

こんにちは私は単純なhtml構造を持っています

<h1>Title text <span>inner text</span></h1>

私が欲しいのは、テキストを邪魔することなく、テキスト（タイトルテキスト）だけを置き換えること<span>です。これは可能ですか？

他のdom要素を追加したくないので、その構造を維持したいと思います。もちろんこれをやっています。

$("h1").text("new text");

spanしかし、あなたは推測することができます...すべての内部テキストとテキスト要素も置き換えます。

考えられる解決策：スパンのテキストを変数にコピーして、それを新しい<h1>テキストと連結することを考えていましたが、それを行うためのより良いクリーンな方法が存在する可能性があると思います。

score 11 · Accepted Answer

jQuery.contents（）を使用すると、次のnodeValueようなものを置き換えることができます。

$("h1").contents()[0].nodeValue = "new text ";

jQuery.contents()テキストノードを置き換えるために使用するデモ

score 4 · Accepted Answer

$("h1").each(function() {
    var textNode = document.createTextNode("new text");
    this.replaceChild(textNode, this.firstChild);
});

デモ：http： //jsfiddle.net/FvbJa/

score 2 · Accepted Answer

別の短いjQueryソリューション：

$("h1").contents().first().replaceWith("new text");

デモ：http： //jsfiddle.net/FvbJa/1/

score 2 · Accepted Answer

これはjqueryなしで機能します：

$title = documento.querySelector('your h1 element');
$title.firstChild.nodeValue = 'New Title text';

score 0 · Accepted Answer

私はこの質問が役に立つかもしれないと思いました。

これを行うことで子要素を取得できます。

var h1_elt = document.getElementById(h1_elt_id);
var span = h1_elt.getElementsByTagName("span");

次に、スパンinnerHTMLをh1要素innerHTMLの一部として使用できます。つまり、h1_elt.innerHTML = "new text" + span.innerHTML + ""

HTMLについて変更する必要があるのは、h1要素にid属性を指定し、h1_elt_idの代わりにそれを使用することだけです。

score 0 · Accepted Answer

以下が機能します。

var h1 = document.getElementById("h1"),
    children = Array.prototype.slice.call(h1.children),
    newText = document.createTextNode("Hello. ");

h1.innerHTML = "";
h1.appendChild(newText);

while(children) {
    h1.appendChild(children.shift());
}

http://jsfiddle.net/TFYmv/

基本的には、特定の要素のすべての子の写真を撮り、要素を完全に変更してから、撮影した写真を使用して前のすべての子を親要素に再追加します。

score -1 · Accepted Answer

const ChgBtn = document.querySelector('#change-title')
const title = document.querySelector('#page-title')

ChgBtn.addEventListener('click', (event) => {
  if (title.innerHTML === 'job') {
    title.innerHTML = 'better job'
    event.target.innerHTML = 'Change title back'
  }
  else if (title.innerHTML === 'better job') {
    title.innerHTML = 'job'
    event.target.innerHTML = 'Change Title'
  }
  else {
    console.error('Wrong')
  }
})

javascript - 子要素を置き換えずにDOM要素のテキストのみを変更する方法

7 に答える 7

Related

Reference