Question

通过我标记HTML的方式......

<textarea></textarea>
<div class="body">

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

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

修改：

我正在使用我的代码编辑器，在这种情况下我的<script>标记已替换为.content，而<body>标记已替换为.body。

.before API似乎是我案例的最佳解决方案，除非只添加了3个字符（例如lol）。 .body中的结果是（例如lolollol）

$('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>

Answer 1

这很棘手，因为.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>

Answer 2

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

$("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>

Answer 3

您可以附加到$content而不是更改整个html

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

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

Answer 4

将HTML，CSS和JS分开。请参阅代码段。

<强>段

$(".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>

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

4 个答案: