jQuery: how to change tag name?
You can replace any HTML markup by using jQuery's .replaceWith()
method.
example: http://jsfiddle.net/JHmaV/
Ref.: .replaceWith
If you want to keep the existing markup, you could use code like this:
$('#target').replaceWith('<newTag>' + $('#target').html() +'</newTag>')
How to change tag name in javascript or jquery?
Use .replaceWith
.
$( "button" ).one( "click",function() {
$(this).replaceWith('<p>' + $(this).html() +'</p>')
})
$( "button" ).one( "click",function() {
$(this).replaceWith('<p>' + $(this).html() +'</p>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><form action="addcomment.php" class="ajaxform" > <input type="text" placeholder="Comment" id="comment" > <button>Add Comment</button></form>
How to change an element's title attribute using jQuery
Before we write any code, let's discuss the difference between attributes and properties. Attributes are the settings you apply to elements in your HTML markup; the browser then parses the markup and creates DOM objects of various types that contain properties initialized with the values of the attributes. On DOM objects, such as a simple HTMLElement
, you almost always want to be working with its properties, not its attributes collection.
The current best practice is to avoid working with attributes unless they are custom or there is no equivalent property to supplement it. Since title
does indeed exist as a read/write property on many HTMLElement
s, we should take advantage of it.
You can read more about the difference between attributes and properties here or here.
With this in mind, let's manipulate that title
...
Get or Set an element's title
property without jQuery
Since title
is a public property, you can set it on any DOM element that supports it with plain JavaScript:
document.getElementById('yourElementId').title = 'your new title';
Retrieval is almost identical; nothing special here:
var elementTitle = document.getElementById('yourElementId').title;
This will be the fastest way of changing the title if you're an optimization nut, but since you wanted jQuery involved:
Get or Set an element's title
property with jQuery (v1.6+)
jQuery introduced a new method in v1.6 to get and set properties. To set the title
property on an element, use:
$('#yourElementId').prop('title', 'your new title');
If you'd like to retrieve the title, omit the second parameter and capture the return value:
var elementTitle = $('#yourElementId').prop('title');
Check out the prop()
API documentation for jQuery.
If you really don't want to use properties, or you're using a version of jQuery prior to v1.6, then you should read on:
Get or Set an element's title
attribute with jQuery (versions <1.6)
You can change the title
attribute with the following code:
$('#yourElementId').attr('title', 'your new title');
Or retrieve it with:
var elementTitle = $('#yourElementId').attr('title');
Check out the attr()
API documentation for jQuery.
Change tagname with javascript
The easiest method is to replace the h4
element completely:
$('h4').replaceWith(function() {
return $('<h1 />', { html: $(this).html() });
});
Example fiddle
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 change tag
The problem is that you're matching all the elements with class s7
, but you need to process them one by one in order to copy their content into new elements. In your current code, this
is always document
, not the current element.
You can use each() to iterate over the matched elements:
$(".s7").each(function() {
var $this = $(this);
$this.replaceWith($("<h1>" + $this.html() + "</h1>"));
});
Or maybe:
$(".s7").each(function() {
$("<h1>" + $(this).html() + "</h1>").replaceAll(this);
});
replace specific tag name javascript
var element = document.getElementById("93");
element.outerHTML = element.outerHTML.replace(/wns/g,"lmn");
FIDDLE
Change the tag but keep the attributes and content -- jQuery/Javascript
try this:
var $a = $('a#thisid');
var ahref = $a.attr('href');
var aclass = $a.attr('class');
var aid = $a.attr('id');
var atext = $a.text();
$a.replaceWith('<p href="'+ ahref +'" class="'+ aclass +'" id="'+ aid+'">'+ atext +'</p>');
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>'));
Related Topics
Determine Original Name of Variable After Its Passed to a Function
Check If a Variable Is a String in JavaScript
Remove Property for All Objects in Array
How to Change Href of <A> Tag on Button Click Through JavaScript
How to Get the Function Name from Within That Function
JavaScript Swap Array Elements
Verify If a Point Is Land or Water in Google Maps
JavaScript Objects: Get Parent
How to Listen to the Form Submit Event in JavaScript
Add Event Listener on Elements Created Dynamically
Building a Promise Chain Recursively in JavaScript - Memory Considerations
Prevent a Webpage from Navigating Away Using JavaScript
Recursively Looping Through an Object to Build a Property List
Run a Website in Fullscreen Mode
Remove Whitespaces Inside a String in JavaScript
Why Don't Audio and Video Events Bubble
Run Change Event for Select Even When Same Option Is Reselected