html - 在不创建节点的情况下附加 innerHTML

Question

我有一个如下所示的元素。我想删除里面的 blockquote 并用它的 innerHTML 替换它们

 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
     <blockquote style="margin-right: 0px; margin-left: 40px; border: none; padding: 0px;">HTML</blockquote>
     <blockquote style="margin-right: 0px; margin-left: 40px; border: none; padding: 0px;">Java</blockquote>
 </blockquote>

到

 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
     HTML<br>
     Java<br>
 </blockquote>

我该怎么做？我知道一种通过创建另一个节点(如 span/div)然后替换 .但我不想添加任何其他元素，只想要它的 innerHTML 元素。任何帮助深表感谢!

Answer 1

如果你可以使用 jquery，你可以这样做:

$('blockquote > blockquote').each(function() {
  var text = $(this).text();
  $(this).after(text + '<br />');
  $(this).remove();
});

fiddle 示例:http://jsfiddle.net/cjsuV/

对于 YUI DOM，您可以使用:

YUI().use('node', function(Y) {
  var blockQuotes = Y.all('blockquote > blockquote');
  blockQuotes.each(function (blockQuote) {
    var textNode = document.createTextNode(blockQuote.get('innerHTML'));
    var brNode = document.createElement('br');
    blockQuote.insert(brNode, 'after');
    blockQuote.insert(textNode, 'after');
    blockQuote.remove();
  });
});

fiddle 示例:http://jsfiddle.net/cjsuV/4/