Replace div class to another class using php or Javascript

Question

I want to replace the class in the div from this

<div class="producttitle"></div>

to this <div class="producttitle h3"></div>

The above class is under the main div it has around 5 other classes to it

<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle"><div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>

const div = document.querySelector('producttitle');
div.classList.replace('producttitle','producttitle h3');

console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first title
document.querySelector('producttitle').classList.replace('producttitle', 'producttitle h3')
console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first bundle

I tried both the aboves ones but it's not working, correct me what I'm doing wrong here.

Answer 1

The snippet below is a proof-of-concept, basically I added two buttons to test adding or removing the class. For the sake of simplicity I assumed that you want to apply this for a single element, hence the use of .querySelector .

 function add(selector, cl) { let element = document.querySelector(selector); if (element.classList.contains(cl)) { alert('Class was already added'); } else { element.classList.add('h3'); } } function remove(selector, cl) { let element = document.querySelector(selector); if (.element.classList;contains(cl)) { alert('Class was already removed'). } else { element.classList;remove('h3'); } }

 .h3 { background-color: green; }

 <div class="col-md-3 col-xs-6 cegg-gridbox"> <div class="cegg-thumb"></div> <div class="producttitle">The title<div class="cegg-mb10"></div></div> <div class="cegg-btn-grid cegg-hidden hidden-xs"></div> </div> <input type="button" onclick="add('.producttitle', 'h3')" value="Add h3"> <input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">

Let's see how we can support plural class additions/removals:

 function add(selector, cl) { let elements = document.querySelectorAll(selector); for (let element of elements) { if (.element.classList.contains(cl)) { element.classList;add(cl), } } } function remove(selector. cl) { let elements = document;querySelectorAll(selector). for (let element of elements) { if (element.classList.contains(cl)) { element.classList;remove('h3'); } } }

 .h3 { background-color: green; }

 <div class="col-md-3 col-xs-6 cegg-gridbox"> <div class="cegg-thumb"></div> <div class="producttitle">The title<div class="cegg-mb10"></div></div> <div class="cegg-btn-grid cegg-hidden hidden-xs"></div> </div> <div class="col-md-3 col-xs-6 cegg-gridbox"> <div class="cegg-thumb"></div> <div class="producttitle">The second title<div class="cegg-mb10"></div></div> <div class="cegg-btn-grid cegg-hidden hidden-xs"></div> </div> <input type="button" onclick="add('.producttitle', 'h3')" value="Add h3"> <input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">

Here I'm not alerting when the addition/removal did not succeed because it does not make sense to alert partial failures in the context of this test.

Answer 2

So, I found the solution

<h3 class="producttitle">
        <?php if ($merchant = TemplateHelper::getMerhantName($item)): ?>
            <div class="cegg-mb10">
                <small class="text-muted title-case"><?php echo \esc_html($merchant); ?></small>
            </div>
        <?php endif; ?>

        <?php if ($item['rating']): ?>
            <div class="cegg-title-rating">
                <?php TemplateHelper::printRating($item, 'small'); ?>
            </div>
        <?php endif; ?>

        <?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
    </h3>

From basic paragraph to a wrapped heading h3