在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标签

回答

相关问题