在DIV中插入Html標籤

如何插入像<p>這樣的html標籤以包含「搜索」文本。在DIV中插入Html標籤

<button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button>

因爲我想隱藏「搜索」文本時，頁面寬度等於= 所以，這將是改變一個放大鏡圖標字形。

我試過jQuery。

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
var windowsize = jQuery(window).width(); 

jQuery(window).resize(function() { 
    windowsize = jQuery(window).width(); 
    if (windowsize < 900) { 
    jQuery('#ihf-quicksearch-submit2').html('<i class="glyphicon glyphicon-search fa fa-search"></i>'); 
    } if (windowsize >900) { 
    jQuery('#ihf-quicksearch-submit2').html(' Search '); 
} 
}); 
}); 
</script>

jQuery工作將「搜索」更改爲放大鏡圖標。但是當頁面仍在加載時，它仍然顯示「搜索」文本。移動版本看起來不太好。

所以我想在「搜索」之前有一個「HTML標籤」，所以我可以「顯示：無;」它來自使用@media CSS的CSS。

注：我不能手動插入<p>因爲我不能從我使用的插件找到的代碼。

有什麼想法？

來源

2016-04-15 Mark Lozano

你可以只都在那裏堅持他們並隱藏他們根據媒體查詢：

<script src="http://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> 
 

 
<style> 
 
@media screen and (max-width:900px) { 
 
    .search-text { 
 
    display: none; 
 
    } 
 
    #ihf-quicksearch-submit2 { 
 
    opacity: 0; 
 
    } 
 
} 
 
@media screen and (min-width:900px) { 
 
    .search-icon { 
 
    display: none; 
 
    } 
 
} 
 
</style> 
 

 
<script> 
 
$("#ihf-quicksearch-submit2").html('<i class="glyphicon glyphicon-search fa fa-search search-icon"></i><span class="search-text">Search</span>').css("opacity", "1"); 
 
</script>

來源

2016-04-15 14:55:32

是的我已經想到了，我想這樣做，但我無法找到插件上的特定行代碼。這就是爲什麼我不能添加任何可以在CSS上調用的HTML標記/類。這就是爲什麼我希望「搜索」文本用「< p>」或「< span>」 –

來包裝，我已經更新了我的答案，只是找到元素並替換它的內容。 –

我在考慮等待頁面加載之前做了一次更新，直到jQuery觸發爲止：您可以用不透明度隱藏文本，然後在加載時使用jQuery重置它。 –

很簡單 - 獲得由ID按鈕的HTML，然後修改它一個字符串，並將其存儲回按鈕的HTML中。

var innerHTML = $('#ihf-quicksearch-submit2').html(); 
innerHTML = '<p>' + innerHTML + '</p>'; 
$('#ihf-quicksearch-submit2').html(innerHTML);

Demo Here

來源

2016-04-15 15:50:00 Tricky12

非常感謝您的幫助！我現在解決了我的問題，我把你的答案和「Jeff Puckett II」結合起來。你們搖滾！ :) –

@MarkLozano沒問題，很高興幫助！ – Tricky12

因此，這裏是回答我的問題。以防萬一有人遇到與我一樣的問題。我把「Tricky12」和「Jeff Puckett II」的答案結合起來 - 給他們信用。

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    var innerHTML = jQuery('#ihf-quicksearch-submit2').html(); 
    innerHTML = '<i class="glyphicon glyphicon-search fa fa-search search-icon"></i><span class="search-text">' + innerHTML + '</span>'; 
    jQuery('#ihf-quicksearch-submit2').html(innerHTML); 
}); 
</script> 


<style> 
@media screen and (max-width:900px) { 
.search-text { 
display: none; 
} 
} 
@media screen and (min-width:900px) { 
.search-icon { 
display: none; 
} 
} 
</style>

來源

2016-04-16 12:48:52

在DIV中插入Html標籤

回答

相關問題