Replacing HTML with new HTML with javascript

Question

I'm trying to replace the list item "<li id="menu-item-3026">...</li>" with this line of HTML "<li><a href="https://www.facebook.com/"><i class="icon-s-facebook"></i></a></li>" with javascript.

Any suggestions?

Current:

<div class="menu" id="menu">
  <ul id="megaUber" class="megaMenu">
    <li id="menu-item-3026" class="menu-item menu-item-type-custom menu-item-object-custom ss-nav-menu-item-4 ss-nav-menu-item-depth-0 ss-nav-menu-reg">
      <a target="_blank" href="https://www.facebook.com/SocialFactor"><span class="wpmega-link-title">Facebook</span>
      </a>
    </li>
  </ul>
</div>

Desired Result:

<div class="menu" id="menu">
  <ul id="megaUber" class="megaMenu">
    <li><a href="https://www.facebook.com/SocialFactor"><i class="icon-s-facebook"></i></a>
    </li>
  </ul>
</div>

Ozzy · Accepted Answer · 2013-08-27 20:03:13Z

2

Try this with jquery:

$("#menu-item-3026")
  .html("<a href=\"https://www.facebook.com/\"><i class=\"icon-s-facebook\"></i></a>")
  .prop("id", "");

Without jquery:

var el = document.querySelector("#menu-item-3026");
el.innerHTML = "<a href=\"https://www.facebook.com/\"><i class=\"icon-s-facebook\"></i></a>";
el.id = "";

answered Aug 27, 2013 at 20:03

Ozzy

8,3327 gold badges58 silver badges96 bronze badges

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

Comments

enhzflep · Accepted Answer · 2013-08-27 20:38:09Z

Assuming no jQuery, you've two basic options.

First, use DOM functions to create the nodes programatically.

Second - update using a simple text string, as ioums has just suggested.

function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

var container = byId('megaUber');
container.innerHTML = '';

var li = newEl('li');
var a = newEl('a');
a.setAttribute('href', "https://www.facebook.com/SocialFactor");

var i = newEl('i');
i.className = "icon-s-facebook";

li.appendChild(a);
a.appendChild(i);
container.appendChild(li);

Of course, you could just do it in one go, too (can't see why it wouldn't execute faster)

var container = byId('megeUber');
container.innerHTML = "<li><a href='https://www.facebook.com/SocialFactor'><i class='icon-s-facebook'></i></a></li>";

Justin Bicknell · Accepted Answer · 2013-08-27 20:04:13Z

1

Are you using jQuery? If so you could just do the following:

  $('#menu-item-3026').replaceWith('<li><a href="https://www.facebook.com/SocialFactor"><i class="icon-s-facebook"></i></a></li>')

answered Aug 27, 2013 at 20:04

Justin Bicknell

4,81620 silver badges27 bronze badges

Comments

ioums · Accepted Answer · 2013-08-27 20:10:50Z

1

Why does everyone immediately go to jQuery? Just use

document.getElementById('megaUber').innerHTML = '<li><a href="https://www.facebook.com/SocialFactor"><i class="icon-s-facebook"></i></a></li>';

answered Aug 27, 2013 at 20:10

ioums

1,39414 silver badges21 bronze badges

1 Comment

Ozzy Over a year ago

It's just because some people are using it so much it feels more natural to write jquery than javascript.

Collectives™ on Stack Overflow

Replacing HTML with new HTML with javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related