[英]Replace h1 tag with span (js loop)
我有幾個帶有標簽的元素，我想將它們全部更改為一個標簽。 所以我 go 像這樣：
document.getElementsByTagName("h1")[0].setAttribute("id", "author-name"); var elem=document.getElementById("author-name"); var parent=elem.parentNode; var newElement=document.createElement("span"); newElement.textContent=elem.textContent; newElement.id=elem.id; parent.replaceChild(newElement, elem); var replacementTag = 'span';
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Text txt</h1> <h1>Text txt</h1> <h1>Text txt</h1> </body> </html>
我 select 標簽給它一個 ID 並根據 ID 我替換整個標簽。 但它只運行一次。 如何更改代碼以便我可以通過所有可用的標簽運行它？
我試圖做類似的事情，但這沒有用：
var replacementTag = 'span';
//start loop
$('h1').each(function() {
var outer = this.outerHTML;
// Replace tag open
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace tag close
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});
有人可以幫幫我嗎？ 如果可能，請在片段中顯示解決方案
泰
用 jQuery 試試這個..
$(document).ready(function(){ $("button").click(function(){ $("h1").each(function( index ){ value = $(this).val() $(this).unwrap().wrap('<pre/>'); $(this).attr("id",index+1); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <button>Alert the value of each list item</button> <h1>Text txt</h1> <h1>Text txt</h1> <h1>Text txt</h1> </body> </html>
您可以使用getElementsByTagName ，然后使用replaceWith替換。
https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName
https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith
const div = document.getElementById('my-div'); const list = div.getElementsByTagName('h1'); Array.from(list).forEach(h1 => { const span = document.createElement('span'); span.textContent = 'this is a replacement example'; span.style.display = 'block'; // just to break line h1.replaceWith(span); });
<div id="my-div"> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> </div>
這是一個非常短的（經過驗證的）：
$('h1').each(function(){
$(this).replaceWith($('<p>' + this.innerHTML + '</p>'));
});
如果您忽略潛在的屬性，您可以使用.innerHTML而不是.textContent來簡單地替換它們並包含正確的內容。
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
PS：無需使用jQuery...
const elements = document.querySelectorAll('h1'); elements.forEach(h1 => { const span = document.createElement('span'); span.innerHTML = h1.innerHTML; h1.replaceWith(span); });
<h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1> <h1>must be replaced</h1>
jQuery將<span>標簽</span>附加<span>到</span> <h1> <span>標題</span>
[英]jQuery Append a <span> tag to a <h1> heading
有沒有辦法用<span>標簽</span>包裝<span>標簽</span><h1><span>使用內聯 Javascript 標記</span>
[英]Is there a way to wrap a <span> tag with an <h1> tag with inline Javascript
如何顯示從Firebase到標頭標簽的檢索數據 <h1> {{}} </h1> 在Vue JS中？
[英]How to show retrieved data from firebase to header tag <h1>{{ }}</h1> in vue js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.