다음 HTML이 주어집니다.
<label for="xxxx" id="Password_label">
<div class="xxxx">Password 555</div>
555
<div class="xxx"></div>
</label>
첫 번째 div 아래의 레이블 요소 안에 쓰여진 텍스트 "555"를 대체해야합니다. 나는 텍스트를 얻으려고 노력하고 있지만 지금까지 할 수 없습니다.
나는 시도했다 :
$("#Password_label").text()
그러나 빈 문자열을 반환합니다.
의 도움으로 텍스트 노드를 가져옵니다 contents()및 eq()다음 사용하여 텍스트를 교체합니다 replaceWith().
$('#Password_label')
.contents() // get all nodes including text node
.eq(2) // get the text node
.replaceWith('newText') // replace with new content<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="xxxx" id="Password_label">
<div class="xxxx">Password 555</div>
555
<div class="xxx"></div>
</label>순수한 JavaScript를 사용 childNodes하여 모든 자식 노드를 가져오고 textContent노드의 속성을 사용하여 텍스트 콘텐츠를 업데이트 합니다.
document.getElementById('Password_label') // get element by id
.childNodes[2] // get all childnodes and get text node need to update
.textContent = 'newText'; // update text content of that node<label for="xxxx" id="Password_label">
<div class="xxxx">Password 555</div>
555
<div class="xxx"></div>
</label>UPDATE : 이 특정 경우 filter()메서드에 의해 빈 텍스트 노드 문제를 피할 수 있습니다
$('#Password_label')
.contents() // get all nodes including text node
.filter(function() { // filterout non-empty text nodes
return this.nodeType === 3 && $.trim(this.textContent).length;
})
.replaceWith('newText') // replace with new content<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="xxxx" id="Password_label">
<div class="xxxx">Password 555</div>
555
<div class="xxx"></div>
</label>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다