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 adiv
.
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
Check If an Array Is Empty or Exists
How to Add an Object to an Array
Remove All White Spaces from Text
How to Set Multiple CSS Styles in JavaScript
How to Add Conditional Attribute in Angular 2
JavaScript Math, Round to Two Decimal Places
Get the Value of Checked Checkbox
Ajax, Back Button and Dom Updates
Can Es6 Template Literals Be Substituted at Runtime (Or Reused)
Nodejs Callbacks Simple Example
How to Calculate Md5 Hash of a File Using JavaScript
Angularjs Changes Urls to "Unsafe:" in Extension Page
How to Check If an Element Is Really Visible with JavaScript
How to Get the Day of Week and the Month of the Year
What Does [Object Object] Mean? (Javascript)
React Component Initialize State from Props
JavaScript Document.Write Replaces All Body Content When Using Ajax
$(Document).Ready(Function(){}); VS Script at the Bottom of Page