CODEWITHSUNDEEP
javascriptjqueryhtmldom
Madhav
Madhav

Reputation: 569

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

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.

Upvotes: 1

Views: 493

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

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>

Upvotes: 1

Marc Puigvent&#243;s Sanz
Marc Puigvent&#243;s Sanz

Reputation: 188

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

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29249

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");

Upvotes: 1

Related Questions