Question

I have the following code in HTML and wanted to replace them using javascript

Original code

<td class="tabButton dijitHidden tweetsTabButton selectedTab" dojoattachpoint="tweetsTabButton" data-type="twitter" style="display: none;">
Tweets
<div class="arrow-up"><div class="arrow-up-content"></div></div>
</td>

Replace it to

<td  dojoattachpoint="tweetsTabButton" data-type="twitter" style="display: none;">
<h2>Tweets</h2>

</td>

Answer 1

By the question contents, and the comments currently present, you need to:

1. wrap the text Tweets with an element, specifically <h2></h2>
2. remove the class attribute from the td to disable CSS
3. use pure JavaScript
4. Assuming a table ID present and using the data-type attribute as verification!

See this working Fiddle Example!

javaScript

// get the table by ID
var table = document.getElementById("table-id");   

// get the table cells
var cells = table.getElementsByTagName("td");   

// for each table cell found
for (var i = 0; i < cells.length; i++) {   

    // get the attribute 'data-type'
    var status = cells[i].getAttribute("data-type");

    // if 'data-type' contains the value 'twitter'
    if ( status == "twitter" ) {   

        // create the 'h2' element
        var h2 = document.createElement("h2");

            // append a textnode to the created element with the text 'Tweets'
            h2.appendChild(document.createTextNode('Tweets'));

        // remove the current text 'Tweets'
        cells[i].removeChild(cells[i].firstChild);


        // remove the class atrribute
        cells[i].removeAttribute('class');

        // append the new element to the current 'td'
        cells[i].appendChild(h2);
    }  
}

Note: Could be optimized, but as is you can see what’s happening. Also the comments are there to guide you through, remove when in production.