Replace HTML element with string content using native JS

Question

There is the following HTML code:

<body>
  <menu>
  </menu>
  ... other html
</body>

I need to replace <menu> tag with HTML content from variable. I know how I can change innerHTML using string variable with content (variable 'template');

menu.innerHTML = template;

Variable 'template' contains '<ul class="menu"></ul>'. As result I want to have the following HTML:

<body>
  <ul class="menu">
  </ul>
  ... other html
</body>

Since you know about innerHTML, you may be interested to know there's a corresponding outerHTML. — James Thorpe
– James Thorpe, Commented Mar 7, 2016 at 10:19
@JamesThorpe That (plus a little example) should probably an answer, and not a comment. — Madara's Ghost
– Madara's Ghost, Commented Mar 7, 2016 at 10:21

James Thorpe · Accepted Answer · 2016-03-07 10:24:02Z

2

You mention innerHTML; there's a corresponding outerHTML property that, when set, will replace the element and all children with your update:

var menu = document.getElementsByTagName('menu')[0];
menu.outerHTML = template;

answered Mar 7, 2016 at 10:24

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcubic · Accepted Answer · 2016-03-07 10:22:34Z

1

Try:

var body = document.getElementsByTagName('body')[0];
body.innerHTML = body.innerHTML.replace(/<menu>[\s\S]*?<\/menu>/, template);

answered Mar 7, 2016 at 10:22

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Comments

Jyoti Prakash · Accepted Answer · 2016-03-07 10:25:35Z

0

Try this

var str = '<ul class="menu"></ul>';
var menu = document.getElementsByName('menu');
var parentMenu = menu.parentNode;
parentMenu.removeChild(menu);
parentMenu.innerHTML = str + parentMenu.innerHTML;

answered Mar 7, 2016 at 10:25

Jyoti Prakash

1,2609 silver badges9 bronze badges

Comments

LintonB · Accepted Answer · 2016-03-07 10:40:52Z

0

try this

var elem = document.getElementsByTagName('body')[0]; // Select any element you want.
var target = elem.innerHTML;
elem.innerHTML = target.replace(/(<menu)/igm, '<ul class="menu"').replace(/<\/menu>/igm, '</ul>');

answered Mar 7, 2016 at 10:40

LintonB

5404 silver badges9 bronze badges

Collectives™ on Stack Overflow

Replace HTML element with string content using native JS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related