JQuery는 내부 텍스트를 변경하지만 html은 유지합니다.
HTML 요소의 텍스트를 변경하되 내부 html의 나머지 부분은 jQuery로 보존하고 싶습니다.
예를 들어 다음과 같습니다.
<a href="link.html">Some text <img src="image.jpg" /></a>
"Some text"를 "Other text"로 대체하면 결과는 다음과 같습니다.
<a href="link.html">Other text <img src="image.jpg" /></a>
편집: 현재 솔루션은 다음과 같습니다.
var aElem = $('a');
var children = aElem.children();
aElem.text("NEW TEXT");
aElem.append(children);
하지만 뭔가 더 우아한 방법이 있을 겁니다.
이것은 잘 작동하는 것 같습니다.
<html>
<head>
</head>
<body>
<a href="link.html">Some text <img src="img.jpg" /></a>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $link = $('a');
var $img = $link.find('img');
$link.html('New Text');
$link.append($img);
});
</script>
링크를 수정할 수 없기 때문에 간단히 사용할 수 있습니다.replace
$("a").html($("a").html().replace("Some text", "Other text"));
jsfiddle의 예.
변경할 텍스트를 공백으로 래핑
<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a>
$('a span').html( 'new text' );
제 해결책은, 조금 늦었지만요.
$('a').each(function() {
var contents = $(this).contents();
if (contents.length > 0) {
if (contents.get(0).nodeType == Node.TEXT_NODE) {
$(this).html('NEW TEXT').append(contents.slice(1));
}
}
});
일부 참고 사항:
contents()텍스트 노드를 포함합니다.children().- 다음을 통해 내용의 사본을 작성해야 합니다.
var contents = ...그렇지 않으면 나머지 요소들은 일단 에 의해 대체되면 영원히 사라집니다.$(this).html('NEW TEXT'). - 그
length체크는 선택사항이지만 권장됩니다. - 그
nodeType체크는 선택사항이지만 권장됩니다.
다른 방법은 다음을 사용하는 것일 것입니다.contents()방법은 다음과 같습니다.
정해진
<a href="link.html">Some text <img src="image.jpg" /></a>
대신할 수 있습니다'Some text'jQuery와 함께
var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
jsFiddle 예제입니다.
생각은contents()사용자 Charlietfl이 답변한 이 질문에서 영감을 얻었습니다.
.contents() 단위로 변경할 수 있습니다.
$('.yourElement').contents()[0].data = 'New Data';
여기서 당신의 경우, "[0.data""는 당신의 텍스트 데이터입니다.
몇 가지 일반 js 기능을 사용합니다.
$('a')[0].firstChild.nodeValue = "새 텍스트";
이 코드를 사용해 보십시오.
$('a').live('click', function(){
var $img = $(this).find('img');
$(this).text('changed');
$(this).append($img);
});
내부 요소가 무엇인지 또는 텍스트가 무엇인지 알 필요가 없는 효율적이고 강력한 방법:
var $a = $('a');
var inner = '';
$a.children.html().each(function() {
inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
당신은 추가할 필요가 있을 것입니다.<span>요소 및 해당 요소의 텍스트 변경(예:
<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>
그런 다음 jQuery에서 전화를 걸 수 있습니다.
$("#foo").html("Other text");
결과는 다음과 같습니다.
<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
이것은 제가 jquery.uniform 라이브러리를 개선한 것입니다.구체적으로.$.uniform.update()기능.청87에서 아이디어를 얻어 조금 바꿨습니다.
텍스트를 스팬으로 변경하되 내부 HTML 및 이벤트 바인딩은 유지하는 것이 좋습니다.HTML을 이런 식으로 저장하고 추가할 필요가 없습니다.
if ($e.is("input[type=button]")) {
spanTag = $e.closest("span");
var contents = spanTag.contents();
if (contents.length) {
var text = contents.get(0);
// Modern browsers support Node.TEXT_NODE, IE7 only supports 3
if (text.nodeType == 3)
text.nodeValue = $e.val();
}
}
저는 그 필요를 위해 jQuery 기능을 추가했습니다.
html을 텍스트 표현으로 변환해야 할 수도 있습니다. 그래서 저는decodeEntities기능.
function decodeEntities(encodedString) {
if (typeof encodedString != "string") return encodedString;
if (!encodedString) return "";
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
jQuery.fn.textOnly = function(n) {
if (this.length > 0)
$(this).html(decodeEntities($(this).html()).replace($(this).text(), n));
return $(this);
}
사용예시$('selector').textOnly('some text')
일반 버전:
let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));
변경할 추가 요소 및 선행 텍스트 축약:
elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);
언급URL : https://stackoverflow.com/questions/5232862/jquery-change-inner-text-but-preserve-html
'programing' 카테고리의 다른 글
| MySQL - 저장 프로시저에서 예외를 두는 방법? (0) | 2023.09.17 |
|---|---|
| 제품을 선택하고 카테고리를 계층적으로 결합 (0) | 2023.09.17 |
| 12c에서 데이터 펌프 덤프 위치 찾기 (0) | 2023.09.17 |
| MVC, C# 및 jQuery를 사용하여 CSV로 내보내기 (0) | 2023.09.17 |
| 도커 이미지를 개인 저장소로 푸시하는 방법 (0) | 2023.09.17 |