DIV内にHtmlタグを挿入

Question

<p>のような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タグ」を付けて、「表示：なし」としたいCSSから@media CSSを使用しています。

注：私は私が使用していますプラグインのコードを見つけカント原因手動<p>を挿入することはできません。

Answer 1

あなたはただそこに両方それらを固執し、メディアクエリに基づいてそれらを隠すことができます：

<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>

Answer 2

非常にシンプルな - そして、のように変更し、IDによってボタンのHTMLを取得文字列をボタンのHTMLに戻して保存します。

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

Demo Here

Answer 3

ので、ここで私の質問への答えはあります。場合によっては、私のものと同じ問題を抱えている人がいます。私は "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>