Change Tag Using JavaScript

How to change a HTML tag using JavaScript

An element's tagName is readonly (immutable) no matter what the element is. You cannot change an element's tag name without some rebuilding of the DOM. That is it's not possible to change an existing element, but it's not that difficult to create a new element and append the existing element's children.

var node = document.querySelector('div'),
    newNode = document.createElement('span'),
    parent = node.parentNode,
    children = node.childNodes;

Array.prototype.forEach.call(children, function (elem) {
    newNode.appendChild(elem);
});
parent.replaceChild(newNode, node);

http://jsfiddle.net/ExplosionPIlls/wwhKp/

replace specific tag name javascript

var element = document.getElementById("93");
element.outerHTML = element.outerHTML.replace(/wns/g,"lmn");

FIDDLE

How to replace a html tag in js?

If you want to stick with your simple string manipulation, you need to use regular expressions and correct the replacements in your replace calls:

text = text.replace(/<font[^>]*>/g,'<p>').replace(/<\/font>/g,'</p>');

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>

Change the text inside html tag with javascript

You can use querySelector to make use of CSS selectors, which are more flexible than just using class names

In this example, we're selecting the ul with the class cart-product-item, and then selecting any direct child (>) li elements.

let cart_ = document.getElementById("sidebar-right");if (cart_) {  let target_ = document.querySelector('ul.cart-product-item > li');
  console.log(target_);        target_.textContent = 'Changing the text';}

<section id="sidebar-right" class="sidebar-menu sidebar-right sidebar-open">  <div class="cart-sidebar-wrap">
    <div class="cart-widget-heading">      <h4>Shopping Cart</h4>      <a id="sidebar_close_icon" class="close-icon-white"></a>    </div>    <div class="widget shopping-cart-sidebar store widget_shopping_cart">      <div class="widget_shopping_cart_content">
        <div class="cart-widget-content">          <div class="cart-widget-product">            <ul class="cart-product-item cart_list product_list_widget ">              <li class="empty">No products in the cart.</li>            </ul>          </div>        </div>      </div>    </div>  </div></section>

How to change the value of a tag using javascript?

Use .innerHTML or .innerText

document.getElementById("tagId").innerHTML="new File",

OR

document.getElementById("tagId").innerText="new File",

OR
Note: Not all browsers support innerTEXT, so use textContent if you want to change the text only,

Reference Stack overflow answer

So like @Amith Joki said, use like

 document.getElementById("tagId").textContent="new File",

Since <a> tag doesn't have value property, you need change the html of anchor tags.

Using Jquery

$("#tagId").html("new File");

OR

$("#tagId").text("new File");

Edit

If you want to change the href using javascript, USe like this

 document.getElementById("tagId").href="new href";

USing jquery,

$("#tagid").attr("href","new value");

change HTML tag name using Pure JS

With some snazzy dom Manipulation you can do this easely.

You simply need to make a new element, move over all the elements so you keep onclick handlers and such, and then replace the original thing.

function addClickEventToSpan() {  document.getElementById('whoa').addEventListener("click",function(){alert('WHOA WORLD! HELLO!');});}function transform(id){     var that = document.getElementById(id);       var p = document.createElement('p');     p.setAttribute('id',that.getAttribute('id'));          // move all elements in the other container.     // remember to use firstchild so you take all the childrens with you and maintain order.     // unles you like reversed order things.     while(that.firstChild) {       p.appendChild(that.firstChild);     }     that.parentNode.replaceChild(p,that);     }

p { background-color:green;color:white; }div { background-color:blue;color:white; }

<div id="demo">Hello fantastical<span id="whoa" style="color:red">WORLD</span>       <UL>          <LI>something</LI>  </UL></div>
<input type="button" onclick="addClickEventToSpan('demo')" value="bind event handler(click WORLD)"><input type="button" onclick="transform('demo')" value="transform">

---

Related Topics