Question

我在html页面中有以下标记：

<li class="slogan">888-888-8888</li>

我试图改变它，看起来像这样：

<li class="phone">
<i class="icon-phone"></i>
<a href="tel:888-888-8888">888-888-8888</a>
</li>

我使用了下面的代码，我发现它可以更改完美的类名，但我无法弄清楚如何更改内容以匹配我想要的内容。

var els = [].slice.apply(document.getElementsByClassName("slogan"));
for (var i = 0; i < els.length; i++) {
    els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
}

Answer 1

@ExceptionHandler

<强> Demo

Answer 2

由于您已经在标签中循环并且项目已标识为els [i]，因此您所要做的就是写入该项目的innerHTML。

    var els = [].slice.apply(document.getElementsByClassName("slogan"));
    for (var i = 0; i < els.length; i++) {
        els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
        els[i].innerHTML = "NEW CONTENTS";
    }

Answer 3

您可以使用jQuery的.replaceWith()功能执行以下操作：

＆＃13;

$('li.slogan').replaceWith(function() {
  return '<li class="phone"><i class="icon-phone"></i><a href="tel:' + $(this).text() + '">' + $(this).text() + '</a></li>'
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="slogan">888-888-8888</li>

＆＃13;

Answer 4

＆＃13;

$('.slogan').each(function(){ 
   $(this).removeClass("slogan").addClass("phone"); // remove class and add .phone 
   $(this).html('<i class="icon-phone"></i><a href="tel:'+$(this).text()+'">'+$(this).text()+'</a>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="slogan">888-888-8888</li>
<li class="slogan">888-888-3626</li>
<li class="slogan">888-888-2551</li>

＆＃13;

Answer 5

尝试使用els[i].textContent设置href，a元素的文字，.innerHTML

var els = [].slice.apply(document.getElementsByClassName("slogan"));

for (var i = 0; i < els.length; i++) {
  var text = els[i].textContent;
  els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
  els[i].innerHTML = "<i class=icon-phone></i>"
                     + "<a href=tel:" + text + ">" + text + "</a>";
}

<ul>
  <li class="slogan">888-888-8888</li>
</ul>

使用JavaScript将标记内的元素更改为其他内容

5 个答案: