如何使用JavaScript将html从某个位置提取到另一个位置并向其添加属性?

"use strict";

let button = document.querySelector('#button');
button.addEventListener('click', onButtonClick);

function onButtonClick() {
    let urls = document.querySelectorAll('a');

    for (let i = 0, max = urls.length; i < max; i++) {

        if (urls[i].href.indexOf('karate') !== -1) {
        
            if(urls[i].parentNode.tagName === 'LI') {
                urls[i].parentNode.className = 'makeRed';
            }
            
        }
    }
}

.makeRed, .makeRed a {
  color: #FF0000;
}

<ul>
    <li><a href="img/karate/image1.jpg">Image 1</a></li>
    <li><a href="img/karate/image2.jpg">Image 2</a></li>
    <li><a href="img/boxing/image3.jpg">Image 3</a></li>
    <li><a href="img/karate/image4.jpg">Image 4</a></li>
    <li><a href="img/kungfu/image5.jpg">Image 5</a></li>
</ul>

<button type="button" id="button">Red Color</button>