Question

我想通过Jquery更新元素中的HTML。但那里有一堂课，我不想被感动。这是一个例子。我想更新你好的文本，但我想保持.arrow课程。有没有办法在不必在jquery

中添加.arrow html

HTML

 <div class="contactfield">hello
   <div class="arrow">
     <img src="images/arrow.png" />
   </div>
 </div>

JQuery的

$('.contactfield').click(function (event) {
    $(this).html('test'); 
});

我知道我可以做到这一点，但感觉很笨：

 $('.contactfield').click(function (event) {
    $(this).html('test<div class="arrow"><img src="images/arrow.png" /></div>'); 
});

Answer 1

在这种情况下，您不需要在＆＃39; .contactfield＆＃39;

中更新整个html

请使用此：

<div class="contactfield"><span class="dynamic">hello</span>
   <div class="arrow">
     <img src="images/arrow.png" />
   </div>
 </div>

$('.contactfield').click(function (event) {
    $(this).find('.dynamic').html('test'); 
});

Answer 2

你可以克隆它;这样您就不必在<span>

周围添加hello

jQuery

$('.contactfield').on('click', function(e){
  var arrow = $('.arrow').clone().wrap('<div>').parent().html();
  $(this).html('test' + arrow);
});

Answer 3

如果您只想更改文本，则可以访问包装文本的textNode。否则，如果您可以像其他人建议的那样更改标记，并将文本包装在<span>或其他标记中

$('.contactfield').click(function (event) {
  $(this)
    .contents()
    .filter((i,node) => node.nodeType === Node.TEXT_NODE)[0]
    .nodeValue = "test"
});

更新HTML值，但忽略当前HTML中的类

3 个答案: