如何在没有任何类名或 ID 的情况下使用 Javascript 或 JQuery 替换 HTML 标签

Posted 2023-05-07

【中文标题】如何在没有任何类名或 ID 的情况下使用 Javascript 或 JQuery 替换 HTML 标签

【英文标题】：How to replace HTML Tags using Javascript or JQuery without any Class name or ID

【发布时间】：2020-03-04 09:07:48

【问题描述】：

请帮我替换下面的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>

【问题讨论】：

你想在运行时替换这个吗？

是的，一页加载

【参考方案1】：

您可以在 jquery 中使用 :contains() 选择器来实现这一点。

示例：$('label:contains("Google")')

现在使用 jquery 中的 replaceWith 函数替换 html 内容。

更新了代码 sn-p 以替换页面加载时的 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>

【参考方案2】：

这是一种静态方式

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>