Appending innerHTML without creating a Node

Question

I have an element like below. I want to remove the blockquote present inside and replace them by its 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>

to

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

How can I do this? I know a way to achieve this by creating another node(like span/div) and then replace the . But I don't want to add any other elements and want only its innerHTML elements. Any help is much appreciated!

Pete · Accepted Answer · 2013-02-28T11:22:39.953

0

If you can use jquery you can do this:

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

Fiddle example: http://jsfiddle.net/cjsuV/

for YUI DOM you can use:

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 example: http://jsfiddle.net/cjsuV/4/

edited Feb 28 '13 at 11:22

answered Feb 28 '13 at 10:31

Pete

57,112
28
117
166

Thanks, I am looking for a way to achieve this through native DOM API.(have to use with YUI DOM :'(.. ) – Sriharsha Feb 28 '13 at 10:47
Have added a YUI DOM example, weird language! – Pete Feb 28 '13 at 11:23
Thanks, although you solution works looks good. it doesn't work in all cases, when there are
tags inside
, they will be interpreted as "TEXT" inside textNode and not as HTML element.
– Sriharsha Feb 28 '13 at 12:29
are you only going to have blockquotes as children of the main blockquote? – Pete Feb 28 '13 at 12:39
Yes, but the innerHTML of those blockquotes can have simple text or HTML elements – Sriharsha Feb 28 '13 at 12:44

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

Do you mean something like:

document.getElementById("your-element").innerHTML = "HTML<br>Java<br>";

Or if you want to append:

document.getElementById("your-element").innerHTML += "HTML<br>Java<br>";

Note: overwriting innerHTML of an element may cause problems. For example if you have onclick events. See more:

edited May 23 '17 at 11:57

Community

1
1

answered Feb 28 '13 at 10:42

Salvatorelab

11,614
6
53
80

sorry @Sriharsha, made a mistake. `innerHTML` is not a method hehe. First code example was wrong, now it is ok. sorry. – Salvatorelab Feb 28 '13 at 10:51

Appending innerHTML without creating a Node

2 Answers2