如何使用jquery / JS替换/更改Html元素？

Question

这里我试图更改Html元素 即<div>....</div>至<h2>.....<h2>。

HTML就像

<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>

这是脚本代码

$(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")
        }
    });
});

但这似乎无效。

Answer 1

一个。这是因为outerHTML是属性，因此您需要为其分配一些值。

＆＃13;

＆＃13;

$('.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");
  }
});

＆＃13;

div {
  border: 1px solid red;
}

h2 {
  border: 1px solid blue;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

B中。将replace与Regex一起使用，以便它将替换所有实例：

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

Answer 2

你可以试试这个：

$(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>')
        }
    });
});

将div替换为h2

Answer 3

您可以合并一些自定义jQuery以减少业务逻辑。您只需要搜索具有ID属性集的div。

＆＃13;

＆＃13;

(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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;