Как заменить HTML-теги, используя Javascript или JQuery без имени класса или идентификатора - PullRequest
Новая
       59

Как заменить HTML-теги, используя Javascript или JQuery без имени класса или идентификатора

1 голос
/ 07 ноября 2019

Пожалуйста, помогите мне заменить ниже HTML-код

Оригинальный код 

<div class="multiAttType">
    <input type="radio" id="Radio7_1" value="Google">
    <label for="Radio7_1" class="radioChoice">Google</label>
</div>

<div class="multiAttType">
    <input type="radio" id="Radio7_2" value="Bing">
    <label for="Radio7_2" class="radioChoice">Bing</label>
</div>

На странице загрузки это должно быть изменено на 

<div class="multiAttType">
    <input type="radio" id="Radio7_1" value="Google">
    <span class="sameclass">Google <a href="https://www.google.com/">Link 1</a></span>
</div>

<div class="multiAttType">
    <input type="radio" id="Radio7_2" value="Bing">
    <span class="sameclass">Bing <a href="https://www.bing.com/">Link 2</a></span>
</div>

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

это статический способ 

window.onload = function() {
	var multAtt = document.getElementsByClassName('multiAttType');
  
  for (var i = 0; i < multAtt.length; i++) {
  
  	var children = multAtt[i].children;
    
    for (var j = 0; j < children.length; j++) {
    	  
      if(children[j].innerHTML == 'Google' && children[j].tagName == 'LABEL') {
        multAtt[i].removeChild(multAtt[i].children[j]);
        multAtt[i].insertAdjacentHTML('afterend', '<span class="sameclass">Google <a href="https://www.google.com/">Link 1</a></span>');
      } else if ( children[j].innerHTML == 'Bing' && children[j].tagName == 'LABEL') {
				multAtt[i].removeChild(multAtt[i].children[j]);
        multAtt[i].insertAdjacentHTML('afterend', '<span class="sameclass">Bing <a href="https://www.bing.com/">Link 2</a></span>');
      }
      
    }
  }
}
<div class="multiAttType">
  <input type="radio" id="Radio7_1" value="Google">
  <label for="Radio7_1" class="radioChoice">Google</label>
</div>

<div class="multiAttType">
  <input type="radio" id="Radio7_2" value="Bing">
  <label for="Radio7_2" class="radioChoice">Bing</label>
</div>
0 голосов
/ 07 ноября 2019

Этого можно добиться, используя селектор: contains () в jquery.

Пример: $ ('label: contains ("Google")')

Теперь используйте функцию replaceWith из jquery длязаменить содержимое HTML.

Обновлен фрагмент кода для замены содержимого HTML при загрузке страницы. 

function replaceHtml(){

$('label:contains("Google")').replaceWith('<span class="sameclass">Google <a href="https://www.google.com/">Link 1</a></span>')

$('label:contains("Bing")').replaceWith('<span class="sameclass">Bing <a href="https://www.bing.com/">Link 2</a></span>')

}


$(document).ready(function(){

//calling the replace function on page load
replaceHtml();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="multiAttType">
    <input type="radio" id="Radio7_1" value="Google">
    <label for="Radio7_1" class="radioChoice">Google</label>
</div>

<div class="multiAttType">
    <input type="radio" id="Radio7_2" value="Bing">
    <label for="Radio7_2" class="radioChoice">Bing</label>
</div>


<button onclick="replaceHtml()">Replace</button>
...