Using Jquery to Replace One Tag with Another

Using jQuery to replace one tag with another

You can pass a function to .replaceWith ^[docs]:

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

Inside the function, this refers to the currently processed code element.

DEMO

Update: There is no big performance difference, but in case the code elements have other HTML children, appending the children instead of serializing them feels to be more correct:

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});

How do you replace an HTML tag with another tag in jquery?

Try this:

$('aside').contents().unwrap().wrap('<div/>');

• Get the contents of aside first.
• Now unwrap the contents.
• Now simply, wrap the contents inside a new tag, here a div.

DEMO

---

Also, you can do this using .replaceWith() method like:

$('aside').replaceWith(function () {
    return $('<div/>', {
        html: $(this).html()
    });
});

DEMO

Replace A tag with DIV using jQuery

$('.normal > a').replaceWith(function() {
    return $('<div/>', {
        html: this.innerHTML
    });
});

http://jsfiddle.net/VMxAL/

How to replace a tag with another and keep attributes using jquery?

You can use jquery .replaceWith() to replacing a tag with another. In function get outerHTML of element and replace tag name with another.

$("ins").replaceWith(function(){
    return this.outerHTML.replace("<ins", "<del").replace("</ins", "</del")
});

$("ins").replaceWith(function(){    return this.outerHTML.replace("<ins", "<del").replace("</ins", "</del")});console.log($("del")[0].outerHTML);

del { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ins data-author="auth1" data-ins-username="user1">auth1 text</ins>

jQuery/javascript replace tag type

Completely untested, but giving this a whirl:

$("td").each(function(index) {
  var thisTD = this;
  var newElement = $("<th></th>");
  $.each(this.attributes, function(index) {
    $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value);
  });
  $(this).after(newElement).remove();
});

I'm looking and looking at it, and I can't think of a reason why it wouldn't work!

1) loop through each td element


2) create a new th element


3) for each of those td's, loop over each of its attributes


4) add that attribute and value to the new th element


5) once all attributes are in place, add the element to the DOM right after the td, and remove the td

Edit: works fine: http://jsbin.com/uqofu3/edit

How to replace one html element with another

jQuery has built in functionality for replacing one element with another.

See: .replaceWith()

http://api.jquery.com/replacewith/

$("form").replaceWith(response);

Use jQuery to change an HTML tag?

Once a dom element is created, the tag is immutable, I believe. You'd have to do something like this:

$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));

How to replace a tag with dynamic element using jquery

You need to use $(this). instead of this. - to invoke jQuery functionality and not native JS, which works differently.

$.each($('.post-content img'), function() {  const imgSrc = this.src;  $(this).closest('p').replaceWith(`<div class="post-image"><div class="post-image-cover" style="background-image: url(${imgSrc})">Test replacement</div></div>`)});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p class="post-content">  <img src="..." /></p>

---

Related Topics