更改元素HTML但忽略最后一个孩子
[英]Change Elements HTML but Ignore Last Child
问题描述
With the way I have my HTML marked up.... 
用我的方式标记我的HTML ....
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
Is it possible to change the html inside of .body without changing the html inside of .content ? 是否可以在不更改.content内部的html的情况下更改.body内部的html？
EDIT : 编辑 ：
I'm working on my code editor and my <script> tag in this case is replaced with .content , and <body> tag is replaced with .body . 我正在使用我的代码编辑器，在这种情况下我的<script>标签被替换为.content ， <body>标签被替换为.body 。
The .before API seems to be the best solution for my case except if only 3 characters are added (ex. lol). .before API似乎是我案例的最佳解决方案，除非只添加了3个字符（例如lol）。 The result in .body is (ex. lolollol) .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>
4 个解决方案
解决方案1
4 已采纳 2016-04-18 20:42:00
This is tricky, because .body may contain text nodes. 这很棘手，因为.body可能包含文本节点。
jQuery's contents() method helps : 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>
解决方案2
3 2016-04-18 20:27:51
One workaround would be to get the reference to the .content element and append() it back in to the .body element after re-setting the html() . 一种解决方法是获取对.content元素的引用，并在重新设置html()之后append()其append()到.body元素中。 Try this: 尝试这个：
$("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>
解决方案3
0 2016-04-18 20:36:30
you can append into $content rather than changing the entire html 你可以附加到$content而不是更改整个html
$('textarea').keyup(function(){
$('.body').html(this.value).append($content)
}).trigger('keyup');
fiddle : https://jsfiddle.net/atg5m6ym/3320/ 小提琴： https ： //jsfiddle.net/atg5m6ym/3320/
解决方案4
0 2016-04-18 20:40:53
Keep HTML, CSS, and JS separate. 保持HTML，CSS和JS分开。 See Snippet. 请参阅代码段。
SNIPPET SNIPPET
$(".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"><html></div> <div class="tag"><head></div> <div class="tag"><style></div> <div class="print style"> </div> <div class="tag"></style></div> <div class="tag"></head></div> <div class="tag"><body></div> <div class="print body"> </div> <div class="tag"><script></div> <div class="print script"> </div> <div class="tag"></script></div> <div class="tag"></body></div> <div class="tag"></html></div> </section>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.