jQueryの更新html要素のテキストはHTMLの子要素に影響しません

Question

私はlitleの問題があり、修正方法はわかりません。

私は私がやりたい何かここ

<ul id="mylist"> 
    <li id="el_01"> 
     <div class="title"> 
      Title Goes Here 
      <span class="openClose"></span> 
     </div> 
    </li> 
</ul> 

1のようなHTMLの階層構造を持っているが、「タイトルをここに」変更することです。

$('#el_01 title').text('New Title Goes Here'); 

しかし、それも削除します：

私は試してみる場合にのみ更新する方法span要素に影響を与えることなく、「タイトルがここに入り」

<span class="openClose"></span> 

ありますか？

Answer 1

DOMノードに直接アクセスしてfirstChildを取得することで、テキストノードを直接編集できます。

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here'; 

いくつかの.title要素がある場合は、.each()ループの中でそれを行うことができます。

$('#el_01 .title').each(function(i,el) { 
    el.firstChild.data = 'New Title Goes Here'; 
}); 

Answer 2

二つの可能な解決策：

次のいずれかのラップ、独自のスパン内のテキスト：

<div class="title"> 
    <span class="text">Title Goes Here</span> 
    <span class="openClose"></span> 
</div> 

...とその更新：

$('#el_01 .text').text('New Title Goes Here'); 

をまたは：コピーを保存するo f openCloseを入力し、テキストを更新してから再度挿入してください：

var openClose = $('#el_01 .title .openClose'); 
$('#el_01 .title').text('New Title Goes Here').append(openClose);