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

用我的HTML标记的方式

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

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

textarea{
宽度：98%；
高度：100px；
}

不要改变这个

一种解决方法是在重新设置

html（）

后，获取对

.content

元素的引用，并将其添加回

.body

元素。试试这个：

$（“textarea”）.keyup（函数（）{
变量$content=$（'.content'）；
$（“.body”）.html（this.value）.append（$content）；
}).触发器（“键控”）

textarea{
宽度：98%；
高度：100px；
}

不要改变这个

您可以附加到

$content

中，而不是更改整个html

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

---

fiddle:

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

片段

$（“.html”）.keyup（函数（）{
$（“.body”）.html（this.value）
}).触发器（“键控”）
$（“.css”）.keyup（函数（）{
$（“.style”）.html（this.value）
}).触发器（“键控”）
$（“.js”）.keyup（函数（）{
$（“.script”）.html（this.value）
}).触发器（“键控”）

textarea{
宽度：98%；
高度：100px；
}
.标签{
字体：700 16px/1.45“控制台”；
颜色：灰色；
}

HTML
CSS
JavaScript

html
头
风格
/风格
/头
身体
剧本
/剧本
/身体
/html

这很棘手，因为

.body

可能包含文本节点

jQuery的方法有助于：

$（'textarea'）.keyup（函数（）{
$（“.body”）
.contents（）//获取文本节点和元素节点
.each（函数（{
if（this.className！==“content”）{
this.nodeValue=this.innerHTML=''；//文本节点需要nodeValue，
//元素节点的innerHTML
}
});
$（'.content'）。在（此.value）之前；
}).触发器（“键控”）
textarea{
宽度：98%；
高度：100px；
}

这里有测试数据
不要改变这个
这取决于更改的内容。是样式、事件等吗？我正在使用代码编辑器，在本例中，我的标记替换为
.content
，而
标签被替换为
.body
。你为什么不另加一个标签，它会将除了内容之外的所有内容都包裹在正文中？如果你使用
，它将不会被删除。在使用
之前，使用backspace已经删除了我的答案，这要感谢AI.G。我希望避免在每个键上附加
。content
。（我正在使用我的代码编辑器，在本例中，我的标记被替换为
.content
，而
标记被替换为
.body
）这似乎是最优雅的，但如果在
.content
上注册了任何事件，它们就会丢失。参见@RickHitchcock您可以附加元素的
克隆（true）
副本以保留事件，尽管我同意从性能角度来看这不是最好的。您的版本更好。这取决于内容是静态的（如果更新，变量将包含旧值）