[javascript] 자식 요소를 변경하지 않고 요소의 텍스트를 어떻게 변경할 수 있습니까?

Program / 글쓴이

요소의 텍스트를 동적으로 업데이트하고 싶습니다.

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

저는 jQuery를 처음 사용하기 때문에이 작업은 저에게 상당히 어려운 것 같습니다. 누군가가 사용할 기능 / 선택기를 가리킬 수 있습니까?

가능하다면 변경해야 할 텍스트에 대한 새 컨테이너를 추가하지 않고 수행하고 싶습니다.

답변

Mark는 jQuery를 사용하는 더 나은 솔루션을 가지고 있지만 일반 JavaScript에서도이 작업을 수행 할 수 있습니다.

Javascript에서 childNodes속성은 텍스트 노드를 포함하여 요소의 모든 자식 노드를 제공합니다.

따라서 변경하려는 텍스트가 항상 요소의 첫 번째 항목이 될 것이라는 것을 알고 있다면 다음 HTML이 제공됩니다.

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

다음과 같이 할 수 있습니다.

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

물론 <div>처음부터 jQuery를 사용하여를 선택할 수 있습니다 (예 🙂 var your_div = $('your_div').get(0);.

답변

2018 업데이트

이것은 꽤 인기있는 답변이기 때문에 jQuery에 플러그인으로 textnode 선택기를 추가하여 약간 업데이트하고 아름답게하기로 결정했습니다.

아래 스 니펫에서 textNode를 모두 가져 오는 새 jQuery 함수를 정의한 것을 볼 수 있습니다. 이 함수를 예를 들어 함수와 연결할 수도 있습니다 first(). 텍스트 노드에서 트리밍을 수행하고 공백, 탭, 새 줄 등도 텍스트 노드로 인식되기 때문에 트리밍 후 비어 있지 않은지 확인합니다. 이러한 노드도 필요하면 jQuery 함수의 if 문에서 간단히 제거하십시오.

첫 번째 텍스트 노드를 바꾸는 방법과 모든 텍스트 노드를 바꾸는 방법에 대한 예제를 추가했습니다.

이 접근 방식을 사용하면 코드를 더 쉽게 읽을 수 있고 다른 용도로 여러 번 사용하기가 더 쉽습니다.

업데이트 2017 (adrach는) 당신이 선호하는 경우 여전히 잘 작동한다.

jQuery 확장으로

코드 스 니펫 표시

Javascript (ES) eqivilant

코드 스 니펫 표시

2017 업데이트 (adrach) :

게시 된 이후 몇 가지 사항이 변경된 것 같습니다. 다음은 업데이트 된 버전입니다.

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

원래 답변 (현재 버전에서는 작동하지 않음)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

출처 : http://api.jquery.com/contents/

답변

실제보기

마크 업 :

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

스 니펫 확장

답변

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

이것은 첫 번째 텍스트 노드 만 변경합니다.

답변

선택할 클래스로 범위에서 변경하려는 텍스트를 감싸기 만하면됩니다.

내가 아는 질문에 반드시 답하는 것은 아니지만 아마도 더 나은 코딩 방법 일 것입니다. 깨끗하고 단순하게 유지하십시오

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

Voilà!

$('#header .mytext').text('New text here')

답변

언급 한 특정 사례에 대해 :

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

… 이것은 매우 쉽습니다.

var div = document.getElementById("foo");
div.firstChild.data = "New text";

이것을 일반화하는 방법을 언급하지 않습니다. 예를 들어에서 첫 번째 텍스트 노드의 텍스트를 변경하려면 <div>다음과 같이 할 수 있습니다.

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

답변

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);
.blue {
  background: #77f;
}
.green {
  background: #7f7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="target blue">Outer text
  <div>Nested element</div>
</div>

<div class="target green">Another outer text
  <div>Another nested element</div>
</div>

스 니펫 확장