Изменения в jQuery внутреннего текста, но сохранить в формате HTML

Question

Изменения в jQuery внутреннего текста, но сохранить в формате HTML

Я хотел бы изменить текст HTML-элемента, но сохранить остальную часть внутреннего html с помощью jQuery.

например:

<a href="link.html">Some text <img src="image.jpg" /></a>

заменить "Некоторый текст" на "другой текст", и результат должен выглядеть так:

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

но должен быть какой-то более элегантный способ сделать это.

302 14

jQuery

14 ответов:

Comments

Ничего не найдено.

Brandon Boone · Accepted Answer · 2013-06-29 17:56:36

Это, кажется, работает просто отлично.

Демо

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

Mark Coleman · Accepted Answer · 2011-03-08 15:20:41

Так как вы не можете изменить ссылку вариант будет просто использовать replace
$("a").html($("a").html().replace("Some text", "Other text"));
пример jsfiddle.

meouw · Accepted Answer · 2011-03-08 15:09:41

обернуть текст, который вы хотите изменить в течение
<a href="link.html">Some text <img src="image.jpg" /></a> 

$('a span').html( 'new text' );

Andrew Cheong · Accepted Answer · 2012-05-07 10:02:52

мое решение, хотя и немного запоздало.
$('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').

The length регистрация необязательна, но рекомендуется.

The nodeType регистрация необязательна, но рекомендуется.

jim_kastrin · Accepted Answer · 2017-05-23 15:18:28

альтернативным способом было бы использовать 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.

anthonygore · Accepted Answer · 2016-06-15 10:28:31

эффективный и надежный способ, который не требует от вас знать, что такое внутренние элементы или что такое текст:
var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);

Darryl Ceguerra · Accepted Answer · 2017-12-07 03:50:59

вы можете изменить его .содержание()
$('.yourElement').contents()[0].data = 'New Data';
где в вашем случае "[0].данных"

diEcho · Accepted Answer · 2011-03-08 15:25:45

попробуйте этот код

$('a').live('click', function(){
    var $img = $(this).find('img'); 
    $(this).text('changed');
    $(this).append($img);
});

Brian Driscoll · Accepted Answer · 2011-03-08 15:11:11

вам нужно будет добавить в  элемент и изменить текст этого элемента, например:
<a href="link.html">Some text<img src="image.jpg" /></a>
затем, вы можете позвонить в jQuery:
$("#foo").html("Other text");
и ваш результат будет эффективно быть:
<a href="link.html">Other text<img src="image.jpg" /></a>

Tim Vermaelen · Accepted Answer · 2012-12-20 15:58:21

это улучшение, которое я сделал в jquery.единая библиотека. В частности,

Yechezkel Deren · Accepted Answer · 2017-06-07 14:59:29

я добавил функцию jQuery для этой потребности.

возможно, Вам потребуется преобразовать html-сущности в текстовое представление, поэтому я добавил

oceanBT · Accepted Answer · 2017-11-23 15:07:02

моя общая версия:

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));

user3270784 · Accepted Answer · 2018-03-18 16:52:57

Стенография для большего количества элементов и ведущего текста для изменения:
elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);

Drea58 · Accepted Answer · 2018-09-11 17:49:44

просто используйте некоторые простые функции js:

$('a') [0].возвращение null.nodeValue = "новый текст";