How to replace/change Html element using jquery/JS?

Question

Here i am trying to change the Html element i.e <div>....</div> to <h2>.....<h2>.

HTML is like

<div>
  <a class=" ClassName" href="javascript: {}" onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8791">Text1</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>
<div>
  <a class=" ClassName" href="javascript: {}" onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8792">Text2</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>
<div>
  <a class=" ClassName" href="javascript: {}" onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8793">Text3</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>

and here is script code

$(document ).ready(function() {
    $('.ClassName').each(function() {
        var id= $(this)[0].children[0].id;
        if(id != null || id != "") {
            $(this)[0].children[0].outerHTML.replace("div", "h2")
        }
    });
});

but this seems not working.

You could use .parent then save the innerHTML of that parent. Go one more parent up, delete the innerHTML (the div), then append that DOM element with the desired h2, and fill the content of the h2 with the saved innerHTML. — ikdekker, Mar 12 '18 at 11:13
javascript is case sensitive. That means that the selector `$('.className')` will never match classes like `class=" ClassName"` only because the upper `C` — caramba, Mar 12 '18 at 11:18
That's just a typo here, in my code i have passed proper class name — Madhav, Mar 12 '18 at 11:20
This is a duplicate question: https://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery — Gavin Thomas, Mar 12 '18 at 11:27

score 1 · Answer 1 · answered Mar 12 '18 at 11:29

A. That's because outerHTML is property, so you need to assign it some value.

$('.ClassName').each(function() {
  var id = $(this)[0].children[0].id;
  if (id != null || id != "") {
  console.log($(this)[0].children[0].outerHTML);
    $(this)[0].children[0].outerHTML = $(this)[0].children[0].outerHTML.replace("div", "h2");
  }
});

div {
  border: 1px solid red;
}

h2 {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class=" ClassName" href="javascript: {}" onclick="EnsureScriptParams()" onmouseup="this.blur();">
  <div class="ms-displayInlineBlock" id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8793">Text3</div>
  <div class="ms-ref-downarrow"></div>
</a>

B. Use replace with Regex so it will replace all of the instances:

.replace(/div/g, "h2");

score 1 · Accepted Answer · answered Mar 12 '18 at 11:30

1

You can try this:

$(document).ready(function(){
    $('.ClassName').each(function() {
        var $this = $(this).children().eq(0);
        var id = $this.get(0).id;
        if(id != null || id != "") {
            $this.replaceWith('<h2>'+$this.get(0).outerHTML+'</h2>')
        }
    });
});

This replace the div to h2

answered Mar 12 '18 at 11:30

Marc Puigventós Sanz

188
8

1

Thank you soooo much sir @Marc Puigventós Sanz – Madhav Mar 12 '18 at 11:38

Mr. Polywhirl · Answer 3 · 2018-03-12T12:01:36.527

You can incorporate some custom jQuery to reduce your business logic. You just need to search for divs that have an ID attribute set.

(function($) {
  // Credit: https://stackoverflow.com/a/20469901
  $.replaceTag = function(currentElem, newTagObj, keepProps) {
    var $currentElem = $(currentElem), $newTag = $(newTagObj).clone(), newTag;
    if (keepProps) {
      newTag = $newTag[0];
      newTag.id = currentElem.id;
      newTag.className = currentElem.className;
      $.extend(newTag.classList, currentElem.classList);
      $.extend(newTag.attributes, currentElem.attributes);
    }
    $currentElem.wrapAll($newTag).contents().unwrap();
    return this;
  };
  $.fn.replaceTag = function(newTagObj, keepProps) {
    return this.each(function() {
      $.replaceTag(this, newTagObj, keepProps);
    });
  };
})(jQuery);

$(document).ready(function() {
  $('.ClassName').find('div[id]').replaceTag('<h2>', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a class="ClassName" href="javascript: {}"
      onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" 
        id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8791">Text1</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>
<div>
  <a class="ClassName" href="javascript: {}"
      onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" 
        id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8792">Text2</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>
<div>
  <a class="ClassName" href="javascript: {}"
      onclick="EnsureScriptParams()" onmouseup="this.blur();">
    <div class="ms-displayInlineBlock" 
        id="ctl00_ctl41_g_8dbdb3cb_6fcb_4641_96f9_04df9c6ac8793">Text3</div>
    <div class="ms-ref-downarrow"></div>
  </a>
</div>

How to replace/change Html element using jquery/JS?

3 Answers3