更改元素HTML，但忽略最后一个子项

Change Elements HTML but Ignore Last Child

本文关键字：最后一个 元素 HTML      更新时间：2023-09-26

用我标记HTML的方式。。。。

<textarea></textarea>
<div class="body">
  <div class="content">don't change this</div>
</div>

是否可以在不更改.content内部的html的情况下更改.body内部的html？

编辑：

我正在编写我的代码编辑器，在本例中，我的<script>标记被.content替换，<body>标记被.body替换。

对于我的情况，.before API似乎是最好的解决方案，除非只添加了3个字符（例如lol）。.body中的结果是（例如洛洛洛尔）

$('textarea').keyup(function() {
  $('.content').before(this.value)
  return false
}).trigger('keyup')
textarea {
  width: 98%;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
  
  <div class="content">don't change this</div>
</div>

这很棘手，因为.body可能包含文本节点。

jQuery的contents()方法有助于：

$('textarea').keyup(function() {
  $('.body')
    .contents()                             //get both text nodes and element nodes
    .each(function() {
      if(this.className !== 'content') {
        this.nodeValue= this.innerHTML= ''; //nodeValue needed for text nodes, 
                                            //innerHTML for element nodes
      }
    });
  
  $('.content').before(this.value);
}).trigger('keyup');
textarea {
  width: 98%;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
  <ol>
    <li>test data here</li>
  </ol>
</textarea>
<div class="body">
  
  <div class="content">don't change this</div>
</div>

一种解决方法是在重新设置html()后，将对.content元素的引用和对append()元素的引用重新设置到.body元素中。试试这个：

$("textarea").keyup(function() {
  var $content = $('.content');
  $(".body").html(this.value).append($content);
}).trigger("keyup")
textarea {
  width: 98%;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
  <div class="content">don't change this</div>
</div>

您可以追加到$content中，而不是更改整个html

$('textarea').keyup(function(){
 $('.body').html(this.value).append($content)
}).trigger('keyup');

小提琴：https://jsfiddle.net/atg5m6ym/3320/

保持HTML、CSS和JS分离。请参见代码段。

SNIPET

$(".html").keyup(function() {
  $(".body").html(this.value)
}).trigger("keyup")
$(".css").keyup(function() {
  $(".style").html(this.value)
}).trigger("keyup")
$(".js").keyup(function() {
  $(".script").html(this.value)
}).trigger("keyup")
textarea {
  width: 98%;
  height: 100px;
}
.tag {
  font: 700 16px/1.45 'Consolas';
  color: grey;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>HTML</legend>
<textarea class="edit html">
</textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea class="edit css">
  
</textarea>
</fieldset>
<fieldset>
<legend>JavaScript</legend>
<textarea class="edit js">
  
</textarea>
</fieldset>
<hr/>
<section class="printer">
  
<div class="tag">&lt;html&gt;</div>
<div class="tag">&lt;head&gt;</div>
<div class="tag">&lt;style&gt;</div>
  
<div class="print style">
  
</div>
  
<div class="tag">&lt;/style&gt;</div>
<div class="tag">&lt;/head&gt;</div>
<div class="tag">&lt;body&gt;</div>
  
<div class="print body">
 
</div>
<div class="tag">&lt;script&gt;</div>
  
<div class="print script">
  
</div>
  
<div class="tag">&lt;/script&gt;</div>
<div class="tag">&lt;/body&gt;</div>
<div class="tag">&lt;/html&gt;</div>
</section>

相关文章：