복붙노트

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

JQUERY

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

해결법

  1. 1.마크는 jQuery를 사용하여 더 나은 솔루션을 가지고,하지만 당신은 너무 일반 자바 스크립트에서이 작업을 수행 할 수 있습니다.

    마크는 jQuery를 사용하여 더 나은 솔루션을 가지고,하지만 당신은 너무 일반 자바 스크립트에서이 작업을 수행 할 수 있습니다.

    자바 스크립트에서 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';

    물론, 당신은 여전히 ​​처음에

    를 선택 jQuery를 사용할 수 있습니다 (즉, VAR your_div = $ ( 'your_div') 수 (0);.).

  2. 2.업데이트 2,018

    업데이트 2,018

    이것은 내가 업데이트 및 플러그인으로 jQuery를에 textnode 선택기를 추가하여 조금을 아름답게하기로 결정 꽤 인기있는 대답입니다.

    스 니펫에서 당신은 내가 모든 (만)을 textNodes을 유도 할 수있는 새로운 jQuery를 함수를 정의 있음을 알 수 아래. 넌 수 제 () 기능이 기능뿐만 아니라 예와 체인. 나는 텍스트 노드에 트림을하고 공간 등 탭, 새 라인은 또한 텍스트 노드로 인식되어 있기 때문에 트림 후 비어 있지 않은 경우 확인. 당신이 너무 후 간단한 제거를 해당 노드가 필요한 경우 그 jQuery를 함수에서 if 문에서.

    어떻게 첫 번째 텍스트 노드와 방법 모든 텍스트 노드를 교체하는 방법을 교체하는 예를 추가했습니다.

    이 방법은 쉽게 그것을 여러 번 다른 목적과를 사용하여 쉽게 코드를 읽을 수 있습니다.

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

    jQuery를 확장으로

    그것이 어떤 jQuery를 객체에 사용할 수 있도록 // JQuery와 확장 추가 jQuery.fn.textNodes = 함수 () { () {this.contents (). 필터 (함수 복귀 리턴 (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim () == "!"); }); } JQuery와 확장 // 사용 $ (문서) .ready (함수 () { $ ( '# 완전히 대체하기'). ( '클릭'에, () => { $ ( '# testSubject') textNodes () replaceWith ( '대체')..; }); $ ( '# replaceFirst라고'). ( '클릭'에, () => { $ ( '# testSubject') textNodes () 제 () replaceWith ( '대체 먼저')...; }); }); P { 여백 : 0 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    ** 변화에 대한 텍스트 **

    문자 그 변경하지 않아야

    문자 그 변경하지 않아야 ** 또한 변화에 텍스트 **

    문자 그 변경하지 않아야

    문자 그 변경하지 않아야 ** 변화에 마지막 텍스트 ** <버튼 ID = "replaceFirst라고"> 먼저 교체 <버튼 ID = "완전히 대체"> 모든 을 교체

    자바 스크립트 (ES) 상당

    이 모든는 HTMLElement에서 사용할 수 CNA 있도록 //는 HTMLElement 객체에 새로운 기능을 추가 HTMLElement.prototype.textNodes = 함수 () { 복귀 ... this.childNodes] .filter ((노드) => { 리턴 (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim () == "!"); }); } // 새로운는 HTMLElement 기능을 사용하여 document.addEventListener ( 'DOMContentLoaded'() => { document.querySelector ( '# 완전히 대체하기').하여 addEventListener () ( '클릭'=> { document.querySelector ( '# testSubject'). textNodes (). 대해 forEach ((노드) => { node.textContent는 = '대체'; }); }); document.querySelector ( '# replaceFirst라고'). 또는 addEventListener는 ({) (, 기능을 '클릭' document.querySelector ( '# testSubject') textNodes () [0] = .textContent 첫 대체. '; }); }); P { 여백 : 0 픽셀; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    ** 변화에 대한 텍스트 **

    문자 그 변경하지 않아야

    문자 그 변경하지 않아야 ** 또한 변화에 텍스트 **

    문자 그 변경하지 않아야

    문자 그 변경하지 않아야 ** 변화에 마지막 텍스트 ** <버튼 ID = "replaceFirst라고"> 먼저 교체 <버튼 ID = "완전히 대체"> 모든 을 교체

    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/

  3. 3.마크 업 :

    마크 업 :

    () {(기능 $ $ ( '입력 [TYPE = 버튼]). 일 (함수'클릭 '() { VAR 캐시 = $ ( '# 부모') 어린이 ().; $ ( '# 부모') 텍스트 ( '변경된 텍스트') APPEND (캐시)..; }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    일부 텍스트
    자식 1
    자식 2
    Child3
    Child4

  4. 4.

    <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");
});

    이것은 첫 번째 textnode 변경

  5. 5.그냥 당신이 선택할 수있는 클래스와 스팬에서 변경하려는 텍스트 줄 바꿈.

    그냥 당신이 선택할 수있는 클래스와 스팬에서 변경하려는 텍스트 줄 바꿈.

    반드시 내가 알고있는 질문,하지만, 아마도 더 나은 코딩 연습에 응답하지 않습니다. 보관할 물건 깨끗하고 간단한

    <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>

    여기!

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

  6. 6.구체적인 사례를 들어 당신이 언급 한 :

    구체적인 사례를 들어 당신이 언급 한 :

    <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";

    당신은 당신이 일반화하는 방법을 설명하지 않습니다. , 말할 경우,이 같은

    , 당신이 할 수있는 일 내 첫 번째 텍스트 노드의 텍스트를 변경하려면 :

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

  7. 7.$ .fn.textPreserveChildren = 기능 (텍스트) { () {this.each (함수 복귀 반환 $ (이) .contents (). 필터 (함수 () { 창 this.nodeType == 3; }) 제 () replaceWith (텍스트)..; }) } 에서는 setTimeout (함수 () { $ ( '. 타겟') textPreserveChildren ( '수정').; }, 2000); .푸른 { 배경 : # 77F; } .초록 { 배경 : # 7f7; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
    외부 텍스트
    중첩 요소
    또 다른 외부 텍스트
    또 다른 중첩 요소

    $ .fn.textPreserveChildren = 기능 (텍스트) { () {this.each (함수 복귀 반환 $ (이) .contents (). 필터 (함수 () { 창 this.nodeType == 3; }) 제 () replaceWith (텍스트)..; }) } 에서는 setTimeout (함수 () { $ ( '. 타겟') textPreserveChildren ( '수정').; }, 2000); .푸른 { 배경 : # 77F; } .초록 { 배경 : # 7f7; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">

    외부 텍스트
    중첩 요소
    또 다른 외부 텍스트
    또 다른 중첩 요소

  8. 8.간단한 대답 :

    간단한 대답 :

    $("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

  9. 9.다음은 또 다른 방법 : http://jsfiddle.net/qYUBp/7/

    다음은 또 다른 방법 : http://jsfiddle.net/qYUBp/7/

    HTML

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

    JQUERY

    var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

  10. 10.여기에 큰 응답을 많이하지만, 그들은 단지 아이들과 함께 하나 개의 텍스트 노드를 처리합니다. 내 경우에는 내가 모든 텍스트 노드에서 작동하고 아이들을 HTML 무시하지만 순서를 보존하는 데 필요한.

    여기에 큰 응답을 많이하지만, 그들은 단지 아이들과 함께 하나 개의 텍스트 노드를 처리합니다. 내 경우에는 내가 모든 텍스트 노드에서 작동하고 아이들을 HTML 무시하지만 순서를 보존하는 데 필요한.

    우리는 이런 경우가 있다면 그래서 :

    <div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

    우리는 텍스트를 수정하려면 다음 코드를 사용하여 순서를 보존 할 수 있습니다

    $ ( '# 부모'). 컨텐츠 (). 필터 (함수 () { this.nodeType == Node.TEXT_NODE && this.nodeValue.trim ()를 호출 = '! }). 각 (함수 () { // 당신은 내가 내 특정 응용 프로그램에 대한 추가 스팬 클래스 정보를 무시할 수 있습니다. $ (이) .replaceWith (this.nodeValue.replace (/ (\ w +) / g "<스팬 클래스 = 'IIIclassIII $ 1'의 onclick ="_ MC (이) 'onMouseover와 ='_ 미스터 (이) '= onmouseout' _mt (이) '> $ 1X ")); }); <스크립트 SRC = "https://code.jquery.com/jquery-3.0.0.min.js">

    일부 텍스트
    자식 1
    자식 2 그리고 다른 텍스트
    Child3
    Child4 여기에서 우리는 다시있다

    여기에 작업 그것의 jsfiddle입니다

  11. 11.난 당신이 .prependTo 찾고있는 생각 ().

    난 당신이 .prependTo 찾고있는 생각 ().

    http://api.jquery.com/prependTo/

    <div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

  12. 12.마크의 대답에 문제는 aswell 빈 textnodes를 얻을 수 있다는 것입니다. jQuery 플러그인과 같은 솔루션 :

    마크의 대답에 문제는 aswell 빈 textnodes를 얻을 수 있다는 것입니다. jQuery 플러그인과 같은 솔루션 :

    $.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

  13. 13.이것은 오래된 질문이지만,이 같은 간단한 기능은 쉽게 당신의 인생을 만들 수 있습니다 :

    이것은 오래된 질문이지만,이 같은 간단한 기능은 쉽게 당신의 인생을 만들 수 있습니다 :

    $.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

    예:

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

    용법:

    $("#my-div").toText("helloworld");

  14. 14.2019 버전 - 짧은 및 간단한

    2019 버전 - 짧은 및 간단한

    document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

    설명

    document.querySelector ( '# 당신의-DIV-ID는') (당신이 변화에 대해있는 텍스트 요소) 부모를 선택하는 데 사용됩니다

    .childNodes [0] 텍스트 노드를 선택

    "새 텍스트"로 .NodeValue 이렇게 = '새로운 텍스트'세트 텍스트 노드 값

    이 답변은 아마도 딘 마틴의 의견에 의해 영감을받은 것입니다. 지금은 년 동안이 솔루션을 사용하고 있기 때문에 확실히 말할 수 없습니다. 다만 어떤 사람들은 이것이 최선의 해결책이라는 사실보다 그것에 대해 걱정 때문에 나는 여기 확률을 게시해야한다고 생각.

    15. from https://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 JSON 데이터를 게시하는 JQuery와 사용할 수 있습니까?  (0) 2020.09.30
[JQUERY] JSONP에 게시 된 데이터  (0) 2020.09.30
[JQUERY] jQuery로 JSONP [폐쇄]  (0) 2020.09.30
[JQUERY] JQuery와 : 어떻게이 완료 크기 조정의 번만 RESIZE 이벤트 호출하려면?  (0) 2020.09.30
[JQUERY] Google 크롬 로컬 파일에서 URL을로드 XMLHttpRequest 객체를 사용하도록 허용  (0) 2020.09.30
,

티스토리툴바